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;

sunnyto · Accepted Answer · 2016-02-17 09:05:22Z

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, 2016 at 9:05

sunnyto

2941 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sapy Over a year ago

Awesome . I just figured that out . Was bout to update the answer. But saw you already figured that out . Thanks .

Mulan · Accepted Answer · 2016-02-18 08:19:18Z

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, 2016 at 8:19

Mulan

136k35 gold badges240 silver badges276 bronze badges

2 Comments

sapy Over a year ago

ya sorry , I removed style layers imports here to make the code succinct .

Johncy Over a year ago

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?

piet.t · Accepted Answer · 2019-04-18 10:44:08Z

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, 2019 at 10:44

piet.t

11.9k21 gold badges45 silver badges56 bronze badges

answered Mar 16, 2019 at 18:39

Jackkobec

6,9771 gold badge42 silver badges39 bronze badges

1 Comment

marcus-linmarkson Over a year ago

why should we do so? Can we just export default connect(... ?

DURGESH · Accepted Answer · 2021-03-06 12:30:28Z

1

Here use redux with functional component in react native

import { useSelector } from 'react-redux';

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

answered Mar 6, 2021 at 12:30

DURGESH

2,4531 gold badge17 silver badges13 bronze badges

Comments

Majedur · Accepted Answer · 2020-10-09 13:25:18Z

0

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)

answered Oct 9, 2020 at 13:25

Majedur

3,2523 gold badges34 silver badges46 bronze badges

Collectives™ on Stack Overflow

Connect not working with StateLess component in Redux-react

5 Answers 5

1 Comment

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related