Connect not working with StateLess component in Redux-react

Question

I'm dispatching an action from some-other component , and store is getting updated with svgArr property, but though the following Stateless component connect'ed to the store , it ain't getting updated when store changes for svgArr.

Is it how it suppose to behave as it's a stateless component ? Or am I doing something wrong ?

const Layer = (props) => {
  console.log(props.svgArr);
  return (<div style = {
    {
      width: props.canvasWidth,
      height: props.canvasWidth
    }
  }
  className = {
    styles.imgLayer
  } > hi < /div>);
};

connect((state) => {
  return {
    svgArr: state.svgArr
  };
}, Layer);

export default Layer;

score 22 · Answer 1 · answered Feb 17 '16 at 09:05

22

You seem to be exporting Layer instead of the connected version of the Layer component.

If you look at the redux documentation: https://github.com/reactjs/react-redux/blob/master/docs/api.md#inject-dispatch-and-todos

It should be something like

function mapStateToProps(state) {
  return {svgArr: state.svgArr}
}
export default connect(mapSTateToProps)(Layer)

answered Feb 17 '16 at 09:05

sunnyto

294
1
7

Awesome . I just figured that out . Was bout to update the answer. But saw you already figured that out . Thanks . – sapy Feb 17 '16 at 10:58

score 16 · Accepted Answer · answered Feb 18 '16 at 08:19

16

Here's a rewrite of your code

import {connect} from 'react-redux';

// this should probably not be a free variable
const styles = {imgLayer: '???'};

const _Layer = ({canvasWidth}) => (
  <div className={styles.imgLayer} 
       style={{
         width: canvasWidth,
         height: canvasWidth
       }}
       children="hi" />
);

const Layer = connect(
  state => ({
    svgArr: state.svgArr
  })
)(_Layer);

export default Layer;

answered Feb 18 '16 at 08:19

Mulan

129,518
31
228
259

ya sorry , I removed style layers imports here to make the code succinct . – sapy Feb 18 '16 at 09:43
Sorry in my case, const mapStateToProps = (state) =>{ return{ authentication :state.authentication, } } const Constants = (props)=> ({ BASE_URL: props.authentication.baseurl }) export default connect(mapStateToProps)(Constants); Can you tell me what should i do now? – Johncy Sep 20 '18 at 12:27

score 3 · Answer 3 · edited Apr 18 '19 at 10:44

3

If you want to connect the stateless function you should wrap it into the another const:

const Layer = (props) => {
  return (
   <div > 
   </div>
 );
};

export const ConnectedLayer = connect(mapStateToProps)(Layer);

edited Apr 18 '19 at 10:44

piet.t

11,718
21
43
52

answered Mar 16 '19 at 18:39

Jackkobec

5,889
34
34

2

why should we do so? Can we just `export default connect(...` ? – jake-ferguson Oct 21 '19 at 11:22

score 1 · Answer 4 · answered Mar 06 '21 at 12:30

1

Here use redux with functional component in react native

import { useSelector } from 'react-redux';

const variable = useSelector(state => state.user.variable)

answered Mar 06 '21 at 12:30

DURGESH

2,373
1
15
13

score 0 · Answer 5 · answered Oct 09 '20 at 13:25

In addition, you can also pass multiple state object with functional components.

import {connect} from 'react-redux';

const PartialReview = ({auth, productreview}) => (
    <div className="row">
        <h2>{auth.uInfo._ubase}<h2>
        <p>{productreview.review_description}
    </div>
);

  const mapStateToProps = (state) => {
    return {auth: state.auth,productreview: state.productreview}
    };
  export default connect(mapStateToProps)(PartialReview)

Connect not working with StateLess component in Redux-react

5 Answers5