Setting up redux in react
Redux is made up of actions, reducers, store and connect
Add the constructor function to the top of the class component and set some state
Getting a property ‘state’ not defined on events? You need to bind this.
Create a file called actions and save actions files here.
Create a file called reducers and save reducer files here. - object.assign() keeps the store immutable - … splits the object and allows us to assign a new value
Combine reducers Save this is the reducers file and name it index.js
Next we need to create the redux store. Create a folder called store and a configStore file. This is where we createStore and set the initial state.
Link up the redux parts
In index.js we now need to set up some bits.
Wrap routes in provider
This is the basics of redux now set up and only needs to be set up once.
Hook up a component into redux using connect
Connect is used to connect to the store from our components so they can interact with redux
Change the export default call to:
It takes two parameters, mapStatetoProps and mapDispatchToProps
Now we need to create the function, it takes two parameters state and ownProps. We return the properties that we want to make available. So we are setting the state to props so we can use in the page functionality.
mapDispatchToProps lets us expose which dispatch methods we want to have available. Leaving it of leaves all dispatches available.
Now we can dispatch a action. dispatch then the name of the action and what you want to pass in.
This is the basics of redux. A good addition to redux is the redux dev tool :-)