How To Use Redux With React¶
This demonstrates how to use redux after you have set up your redux state in the store.
To use redux in a react component you need to import redux connect and the function you created in redux actions.
Redux Connect¶
When using redux in a file you need to export the redux connect at the bottom of the file. There are two functions you can use with redux in react:
- mapStateToProps - to retrieve a props from the redux store
- mapDispatchToProps - to dispatch an action to redux store
mapDispatchToProps¶
mapDispatchToProps is used to dispatch information in the react component to the redux store through the redux actions.
In the image, in the return of the function the yellow text is the name of the function that was created in redux actions and the blue text is the name of the initial state created in the redux reducer which you would like to update.
To dispatch to the redux store you can call the function through a prop.
For example, in this image this.props.setGlobalSalesTitle() is used and a string is passed. This is sent through the mapDispatchToProps to the redux store.
mapStateToProps¶
mapStateToProps is used to retrieve a props from the redux store.
The image shows how mapStateToProps retrieves the prop. In the return of the function the path to get the prop is state.saleTitle.globalSaleTitle. To get the path to your file would be state.id.initalState, the id created in core.js file and the initalState created in redux reducer file.