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;

Answer 1

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)

Answer 2

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;

Answer 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);

Answer 4

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)

Answer 5

Here use redux with functional component in react native

import { useSelector } from 'react-redux';

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