Menu
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;
684
You just need to export the store from the module where it created with createStore() . Also, it shouldn't pollute the global window object.
As of version 7.1, Redux supports React Hooks, meaning you can use Redux with Hooks in your functional components instead of using Redux connect() .
The connect() function connects a React component to a Redux store. It provides its connected component with the pieces of the data it needs from the store, and the functions it can use to dispatch actions to the store.
The mapStateToProps() method is used to render the stored data to the component. The mapDispatchToProps() method is used to render the action creators with props to the component.
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)If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
