This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "Creating a Reducer" Lesson
[00:00:00]
>> Brian Holt: That's all this rootReducer does. So this, let's just, for fun, let's go make rootReducer and we'll or the locationReducer, and we'll come back. So, location.js. We'll come in here. It's going to export a default function. And well call it the locationReducer. This takes in, again, a state and an action.
[00:00:21] And if it arrives to this reducer, we know that it's just going to do whatever it already needs to be here. So we'll say const newState, newState = Object.assigned we'll give in an empty object. Every reducer must return a new object that a huge key here you can't just modify the old state it's must be new state that is a new object, right?
[00:00:53] So that is what this does, okay? Then we'll assign everything from state previously. Cuz we don't wanna override other things. There could be hundreds of things inside of this state object. We only wanna modify the location. And then the last thing, we'll just overwrite the location. So location will be action.payload.
[00:01:18] Then down here we just return. NewState you try return newState. And really you can discard down to return this like that. So this reducers not very complicated, right? All it does is it just reads the payload and assigns it to the right place. That's all it's doing.
>> Brian Holt: Any questions about this?
[00:01:55] Now this is pretty round about, this is kind of like multiple steps into this. None of this is very hard. I could of just state dot location equals blah. Why am I going through all those ritual and circumstance? And that question, why are we going through all those ritual and circumstance?
[00:02:13] The nice thing about this, this is mutating state like state is changing. 99% of your bugs in your application are from Mutating state the wrong way. So here, I can write a unit test very easily for this to assure myself this always happens the same way, the correct way.
[00:02:32] That's compelling.
>> Brian Holt: Okay, so any questions about the location reducer, does that make sense so far?
>> Brian Holt: So that's what this Reducer does, is it just delegates to other Reducers. Let's go into combineReducers of why this is helpful. Right now, we're passing the entire state of the entire world to the locationReducer.
[00:02:58] So if locationReducer just did this, for example, this would break everything or maybe just even did something like this. And it just says return location action.payload. Payload. What happens now. This just obliterated everything in state, right? Anything that wasn't state previously is just gone now. Imagine if your application just decided to drop all of its state?
[00:03:30] [LAUGH] That would break everything, right? So that's why we can come back into and not write this Reducer and you just combine Reducers. What this is gonna do which makes it a little bit easier, comment that out for just a second. We'll put this as combined reducers. When this calls location, it'll use that key name, which is the key name of the location, it'll pull that out and it will provide that to here.
[00:03:57] So state actually won't be the entire state, it will just be location. So now this Reducer only has to worry about location problems.
>> Brian Holt: So we are gonna refactor this just a tiny bit. So it's going to be, we are gonna move the action type into here. So switch action.type or we don't have to use a switch, we can just use an if statement, so if action.type === SET_LOCATION.
[00:04:32]
>> Brian Holt: Then return action.payload. else, return state
>> Brian Holt: So what have we changed now with combine reducers this function now is going to be called every single time for every single action. So not every action that comes through here it's gonna be a set location. It might be a set animal one, right?
[00:05:09] If it's a set animal action type, it's just gonna say, I don't have to care about that one, I'm just gonna return the state as it was. So you always have to return something, so you either return the old state if nothing needs to change or you return the new state.
[00:05:24] Last thing here. This has to have a default state. So when it instantiates the application that it has some sort of state to start with, a default state if you will, right? So we can use default parameters in ES6 and just say that the default state of this is Seattle, Washington.
[00:05:45] So now, if state is null or undefined or anything like that, this will now become Seattle. So this is the initial state of the application. So now we can get rid of all of that.
>> Brian Holt: And now we have our first reducer for the location of our animal.
[00:06:07] Does that make sense so far? We still have to kind of finish out the circle with actions and action creators, but we'll do that here in a second. If this is vexing, that's because it's confusing, just so you know. It is confusing, so if it feels hard, it's because it is.