Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Respond to a Single Redux Action in Multiple Reducers

    Andy Van SlaarsAndy Van Slaars

    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.

    reactReact
    15 - 16
    reduxRedux
    3 - 4
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss