Use Multiple Reducers in Redux with combineReducers
In this lesson we’ll add a new reducer to our application and combine it with the existing reducer. We’ll use the new reducer to display messages in our application. Because we are essentially creating namespaces within our state with multiple reducers we will need to combine them to create our Redux store. To do this we will need to refactor our existing components connections to the store to get back to a working state.
[00:00] I'd like to control the display of messages in this message component using Redux. Let's start by creating a new reducer for it. In my reducer's directory, I'm going to create a new file. I'm going to call it messages.js.
[00:14] I'd like my default export from this file to be my reducer function, so I'm going to export default function. This function's going to take in two arguments just like any reducer. It's going to take in my state and it's going to take in an action.
[00:30] In this case, our case is just going to be our message, so we're going to default our state value to an empty string. Then inside my reducer function, I'm going to use a switch statement.
[00:42] I'm going to switch based on my action's type and my default case. I'm just going to return the state without any modification.
[00:57] I'm also going to add a case for an action type which we're going to call message_shell. You notice I'm using a constant here rather than a string. We'll add that constant value in a second. All we're going to do here is return our action.payload. Payload is going to be the actual message that we want to show.
[01:18] Then up at the top of the file here, I'm going to define a constant which I'll call message shell. That's just going to be the string message_shell.
[01:28] We also want to make it easy to create one of these action objects, so I'm going to export a constant which I'm going to call show message. Show message is going to be an action creator, so it's going to accept our message string.
[01:46] It's going to return an action object which is going to have a type. That type is going to be message_shell. It's going to have a payload which is going to be our message string.
[02:01] Now we have our reducer set up to show a message, and we have an action creator to do that. So I'm going to save this file. Then back in the source directory, I'm going to open up store.js.
[02:12] We need to refactor store.js a little bit. I'm going to come down here to where I'm importing reducer from reducers/todo. I'm going to give this a more appropriate name. I'm going to call this to do reducer.
[02:27] Then I'm also going to import message reducer from reducer/messages. Now we're pulling in two reducers.
[02:38] But you'll notice that create store only accepts a single reducer as an argument. We can fix this by also importing combine reducers from Redux.
[02:51] Now we can come down here, and I can declare a constant, which I'll call reducer. This is going to be a call to combine reducers.
[03:01] Combine reducers is going to take an object. In this object, I'm going to map keys to reducer. I'm going to map to do to the to do reducer that I imported, and I'm going to map message to the message reducer. Essentially what this does is create named spaces within the state, and each named space is going to correspond to the subset of the overall application state that a particular reducer is focused on.
[03:28] Everything related to my to dos that's handled by the to do reducer will be accessible through state.to do. Then my message, which is handled by the message reducer, will be accessible through state.message.
[03:41] Their store configuration updated, let's save this. We'll see when the browser reloads, we've broken our app. The problem is that we didn't have this to do property between state and our individual to do items, like in this case, to dos, so we need to refactor some of our existing components.
[04:00] I'm just going to go into my components directory. I'm going to open up to do form.js. I'm going to scroll down to where I'm calling connect. I'm just going to update this call to state to state.todo.current to do. I can save that.
[04:18] My application is still broken because I also need to go into to do list, scroll to the bottom, and update where I'm mapping my state to props here to add that to do named space. Now our application's back to a working state.
[04:34] Let's open up message.js. Let's connect this component. In order to do that, I'm going to import connect. That's going to come from React Redux.
[04:50] Then down at the bottom of my file where I'm exporting default message, I'm going to export default. I'm going to use a call to connect. Then I'm going to pass message into the resulting function.
[05:03] Connect is going to take the map state to props argument. I'm going to pass out a function that accepts state and returns my props which in this case is going to be a simple object that just has a message property. That's going to map to state.message. When I save that, the app reloads, and everything's still working.
[05:25] Now that the message component is connected to Redux, I'm going to go and find todo.js where we're defining all of our action creators for the to do reducer. I want to dispatch my show message action creator here.
[05:38] I'm going to start by importing show message. That's going to come from our messages file. With that imported, I'm going to scroll down to my saved to do function where I'm dispatching an asynchronous action to create a new to do.
[05:57] What I'd like to do here is call dispatch. I'm going to pass it my show message action creator. I'm just going to show the message saving to do while it's in the act of saving the to do. I'm going to save this.
[06:12] When the browser reloads, I'm going to add a new to do. I'm going to save that. We should see our message being displayed above the input.