Respond to a Single Redux Action in Multiple Reducers
Every dispatched action in Redux is sent to all reducers. This means a single action can be handled in different ways by different reducers. In this lesson we’ll look at how this can be used to handle updates in multiple parts of our state tree in response to a single action.
[00:00] We're dispatching showMessage when we start the save process, but when the save is complete, the message is still being displayed. We need to update our code to hide this message when the API call is finished.
[00:10] Your first instinct might be to add a new action creator just to hide our messages, and then dispatch that second action to hide the message along with our addTodo own in our event. This would work, but there's another way.
[00:23] When an action is dispatched, all of our reducers will receive that action. We can update our message reducer to respond to actions that are already being responded to in the todo reducer, but we can respond to them in a different way.
[00:36] Since we're dispatching the addTodo action once our save is complete, we can use that to also hide our message. I'm going to scroll up to the top, and where I'm declaring my todoAddConstant, I'm also going to export that so that I can make it available in my message reducer.
[00:51] I'll save that file, and then in messages.js, I'm going to add an import and I'm going to import todo_add, and I'm going to import that from my todo file. Now that I have that imported, I'm going to come down to the switch in my reducer, and I'm going to add a new case for todo_add, and in this case I'm going to return an empty string as my message.
[01:22] With that defined, I'm going to save this file and when the browser reloads, I'm going to add another new todo, and we'll see that I have no message. I'm going to open up the Redux DevTools, and I'm going to bring up the slider, and we'll see that we have a bunch of state updates going through.
[01:40] We see our messageShow has been dispatched, and then todoAdd has been dispatched. I can step through this, and if we take a couple steps back, we'll see where we've entered our text, hit enter, and we've shown our message, our save operation completes, the item's added to our list, and our message is hidden.
[02:00] While it happened to fast to see while we did it live, we can use the DevTools to walk through and make sure each step in our state has been properly applied to our rendered output. We can apply this same approach to showing a message when we're loading our todos, and then hiding it when the action is complete.
[02:17] Back in todo.js, I'm also going to export todos_load, and then down in my fetchTodos action, right before I call getTodos, I'm going to dispatch a call to showMessage with the message "Loading Todos," and I'm going to save that, and we'll see when the browser reloads it shows our message, but it's till not hiding it.
[02:41] Since I've exported this todos_load, I can go back into messages, and I can add this as a second case, and we're just going to let this fall through. We'll do todos_load, and then we just need to make sure we update our import up here, and I can save that.
[03:03] When the browser reloads, it will show our message and then as soon as the todos are loaded, the message will be hidden.