Using combineReducers in React

React has a lot of useful npm packages that make building a React app easier and more organized! One such package is known as combineReducers, which allows you to, as the name suggests, combine your reducers into one. Although this package is not necessary when handling multiple reducers, it definitely helps when you want to separate concerns by having reducers handle their own slice of state while having the reducers accessible in one combined reducer.

In order to install combineReducers, you’ll need your app to have Redux installed, which is as easy as entering “npm install redux” in your app’s directory.

Here’s an example of using combineReducers in my Mod 5 Flatiron project. On line 10, I’m importing my own combinedReducer from my reducers folder and passing it into createStore() in order to initialize the state shape of my Redux state. Here we can see that combining my reducers allows me to pass all of them as one argument for createStore()!

Let’s take a look at the file I’m importing “combinedReducers” from to see how easy it is to combine our reducers..

Very simple! The syntax for listing your reducers in your combinedReducers() function would normally look something along the lines of:

combineReducers({
user: userReducer,
post: postReducer })

However, having your reducers have the same name as the state slices you’re dealing with will allow you to write more concise code, as seen in the snippet above! Essentially, the snippet would be equivalent to:

combineReducers({
user: user,
post: post })

Now let’s take further look down to see what our separate reducers look like.

Again, in order to make use of the more concise code, I’ve named each reducer the same as the state they’re concerned with. What you’ll notice in both of these is that they both have their own initial state, which include arrays for only their concerned slice of state. So if the shape of the state appears to be declared in two separate reducers here, how does combineReducers handle that when setting the initial Redux state?

Remember how we assigned our reducers in our combinedReducer? combinedReducers uses those assignments of “user” and “posts” in order to separate their respective slice of state while allowing you to access each slice easily. That being said, the state shape of our Redux state will look slightly different than most shapes that don’t make use of combinedReducers. It’ll look something along the lines of:

As seen above, there’s that added level from the separate reducers, so accessing these slices of state will be slightly different than states not initialized with combinedReducers.

As can be seen above in line 23, when accessing the array of posts, we first need to specify that we’re working with the post slice of the state! This is done by adding that additional post in between state and posts (with the singular post referring to the slice produced by our post reducer). The same would apply for users, as it follows the same pattern as posts.