In my last post I talked about the creation of a store in redux and why or why not one might want to consider using redux. To briefly reiterate; redux will store state globally in a....store. Big benefit : no prop threading, possible problem : global store that becomes very big can be hard to navigate and understand, especially for those new to code base.
Once the store is created, we will often have a rootReducer
This will reference a file which will be in our newly made reducer folder in our src directory looking something like this
Inside that rootReducer file we can use a built in method from redux called combineReducers which will put our reducers together in ab object format. We might have a reducer that deals with a deck of cards state so we might format it like this: combineReducers({ deck: deckReducer, otherThing: otherThingReducer, etc.. }). You will of course want to export this combine reducer and import in the reducers that you will use for deck and whatnot.
Now let's keep in mind what we are doing here because I sometimes jump around when creating my actions and reducers. Reducers deal with how state changes in response to an action sent to the store. Actions describe what happened, reducers specify what will happen. Sometimes at this point before constructing a reducer I will jump into my actions file and create my types folder and an action folder specific for a reducer.
Once we create our actions file we need our types file. This is where we will export all our types of reducers. We name them in all uppercase letters with underscores rather than camelCase. Then we will make the action file in accordance to the state we are going to make a change to, like the deck file in the picture above. You will need to import a type name from your types file. Then you will create a function that will be exported that will describe something that will happen in state.
Action functions generally will return an object that will have a type and payload key. The type key will have a value of the type that was imported from the types file that corresponds with the action. The payload will hold the actual meat of data. A simple action might look something like this:
Now is where I would jump back to the reducers folder and create the reducer file for, in our examples case, the deck. In this reducer we will shape how our deck state will look. The way we do this in redux is quite similar to using state regularly. We will make our object or array or however the state will be structured. One difference though, in redux generally we use initialSOMETHINGstate (initialDeckState) We will also have a switch statement that will handle which actions we send to the store to make changes.
The way this switch statement works is that it will check actions by type. So if we remember our action functions would return a js object that would have a type and payload key. The switch will find the action.type that we are tying to use and then do some work.
Now of course often times we wont have something as simple as the picture. We might have to throw a function call in there or something that is made elsewhere. This case happened to be quite simple so that was not necessary. One other thing to remember about setting up the switch statement is to have a default case at the end which will just return state.
And now we are almost done. Once we have a reducer, an action, and the store set up all we need to do is connect to the component we want to use em in. In any component, we can import the connect function from react-redux. We will use this when exporting the component.
The connect function takes in two arguments, mapStateToProps and mapDispatchToProps. If you are missing one or the other, you can put null as an argument on their place. Using these functions we can add to our props things we want from state or functions to dispatch to our store. Then we can use them as props in the component.
Top comments (0)