Check out a free preview of the full Complete Intro to React, v3 (feat. Redux, Router & Flow) course:
The "Refactor Reducers" Lesson is part of the full, Complete Intro to React, v3 (feat. Redux, Router & Flow) course featured in this preview video. Here's what you'd learn in this lesson:

Brian shows how to use combineReducers to create the root reducer. Instead of writing our own root, each reducer separates into its own silo. With combineReducers, each reducer only gets the part that it's concerned about and nothing else.

Get Unlimited Access Now

Transcript from the "Refactor Reducers" Lesson

[00:00:00]
>> Brian Holt: What we're gonna do now is we're gonna go refactor our reducers a little bit. And you're also probably gonna be getting some flow typing errors here because it's gonna sa,y I can't tell what this is.
>> Brian Holt: But we're gonna do something kinda cool here. So, I wanted to show you how to write your own rootReducer to show you that rootReducer is nothing more than just taking an action and routing it to some other reducer, right?

[00:00:26] It's a pretty simple function. So it's really easy to write yourself, however there's a function from Redux called combine reducers that will actually write this function for you, so you don't have to go in and write that switch case for every single thing. Furthermore, it's actually going to silo each piece of your state into its own reducer, which is pretty cool in my opinion.

[00:00:47] So let's go ahead and do that. Up here, we're going to import,
>> Brian Holt: CombineReducers,
>> Brian Holt: from
>> Brian Holt: 'redux'.
>> Brian Holt: Okay?
>> Brian Holt: Now what we're gonna do,
>> Brian Holt: Is we're gonna refactor setSearchTerm a little bit. First thing is we're gonna call the reducer the same thing as the name of the state.

[00:01:19] So instead of being setSearchTerm, we're just gonna call it searchTerm, and I'll show you why here in just a second.
>> Brian Holt: Okay, then state is going to represent not the whole state of your entire redux store, it's going to represent just that piece of state, right? So the default state for this is not going to be this object up here, in fact, you can just go ahead and delete that.

[00:01:46] The default state of searchTerm is going to be empty string, right? Cuz now this reducer is only going to worry about searchTerm and nothing else, okay? Action, as you may have guessed, is an action, which is that type which we just created.
>> Brian Holt: And then here we're gonna have to make this a whole method body.

[00:02:14]
>> Brian Holt: And what this is gonna do here,
>> Brian Holt: I think you can even just get rid of that.
>> Brian Holt: So now this reducer is going to get run on every single action that happens. So you need to make sure and check that it's the correct action for this reducer.

[00:02:31] So we're gonna say if (action.type ==== SET_SERACH_TERM), then you're going to return action.payLoad, right? Otherwise you're just going to return state.
>> Brian Holt: Okay?
>> Brian Holt: So this is the new way that we're going to be writing reducers from now on. We're gonna write these single responsibility reducers, and we're not gonna have this big reducers, worry about multiple piece of state all at once.

[00:03:14] This is only gonna worry about searchTerm and that's it, okay? You can actually just delete all of rootReducer here and we're gonna say const rootReducer = combineReducers, and what we wanna have here is searchTerm: searchTerm.
>> Brian Holt: So what this is saying here is we have this piece of state called searchTerm, and the one reducer that worries about searchTerm is called searchTerm, right?

[00:03:52] Now the reason why I called this searchTerm is so that I could take advantage of a little ES6 nicety. Which is, if I have searchTerm: searchTerm I can actually just say searchTerm and just cut it down to one thing. It's a new thing with ES6, it's just me being super lazy, that's the sum of the story here.

[00:04:12] But searchTerm right there is the exact same thing as searchTerm: searchTerm. So that's what combineReducers does for you. I still see I have an error here, could not resolve name.
>> Brian Holt: Okay, sorry. So go back to your types file.
>> Brian Holt: And you need to say it ActionT equals, which is something I forgot there, and then you also need the bar here and the bar here.

[00:04:43] And that's just the notation for declaring the types like this.
>> Brian Holt: Okay, and that should fix our problems. So that's what I just fixed right there, what I have highlighted.
>> Brian Holt: Cool, and now go back to reducers.
>> Speaker 2: Sorry, what are the bars for? Is that needed in generic types?

[00:05:07]
>> Brian Holt: Mm-hm.
>> Brian Holt: So go back to reducers and now hopefully action will be pleased with what you've done, just make sure
>> Brian Holt: Cool, so now we have to go fix something else, but that's okay, we'll fix that here just momentarily. So that is correct, that is working as expected.

[00:05:43]
>> Brian Holt: Yep, cool. So combineReducers is really great. What I like about it is now searchTerm is very much siloed just to this particular reducer and other reducers that don't care about it will not see it, right? So all of that object merging and stuff that we were doing previously combineReducer is just gonna do for you behind the scenes.

[00:06:08]
>> Brian Holt: And you can actually use combineReducers kind of in tandem with other things as well. Like say you do have a reducer that needs to worry about multiple pieces state all at once. You can write your own reducer that takes care of those cases. And then at the bottom, use combineReducers to deal with all the other single responsibility ones.

[00:06:32] So you can use combineReducers and write your own reducers all at once, that's an acceptable way to go as well. So, I typically use combineReducers, but I wanted you to see that it's not very complicated what it does. So, cool.
>> Brian Holt: So I think the last thing we have to do is go set a type on action creators.

[00:07:00] So we have searchTerm here, and we just to need to tell it that that is a string.
>> Brian Holt: It's still pissed off about ESLint, but we are getting there in just a second. What I want to do is say export default here, right? But that's not what we wanna do.

[00:07:28]
>> Brian Holt: Okay, any questions about combineReducers or how we typed redux?
>> Brian Holt: That's really it for reducts itself, right? That's pretty much all the surface area for reducts. We're gonna get in in augments, some of the abilities of reducts when we get into asynchronous actions, but for now that's it.