This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "Root Reducer" Lesson
[00:00:00]
>> Brian: So now we have a store, that's what this is, this is a Redux store. It has the ability to use the dev tools, it has also the thunks extension installed.
>> Brian: Okay, now what I want you to do, let's go into here, I'm gonna make a new folder inside of my source directory, and call it reducers
[00:00:24]
>> Brian: And I'm gonna keep of all my individual reducers inside this reducers folder.
>> Brian: So, inside of reducers, make a new file called index.js.
>> Brian: Why index? Well, here inside of store, we said import reducer from ./reducers. Reducers is not a file, it's a directory, right? But, if you say a directory, node will result that automatically to be index.js inside of that directory if it cannot find a file called reducers.js.
[00:01:06]
>> Brian: So that's what this import system ports the index file from reducers which will be this index.js file.
>> Brian: Little bit kind of clever hack but I think it kind of cleans everything up, it makes it look nice.
>> Brian: Okay, so inside of this index,js file, we're gonna say import combineReducers from redux.
[00:01:34]
>> Brian: And we're gonna import a ./location reducer, which we have not written yet. Oops, sorry, import location from ./location. This will be an additional reducer that we will write momentarily.
>> Brian: And we will export default combineReducers.
>> Brian: And we'll have location be location. So let's talk about what combineReducers is here.
[00:02:06]
>> Brian: CombineReducers is a helper function from Redux.
>> Brian: And what this helper function does is helps us kind of keep everything in order. So now we have this reducer called location. And the only thing that this location reducer has to do is manage the location mutation of state.
[00:02:29] So again, let's talk a little bit about what a reducer is, probably, at this point.
>> Brian: So you don't have to follow along with this. If I were to write this without using combinedReducers, the way that I would do this is, I'd write a function called, const rootReducer.
[00:02:46]
>> Brian: And this is going to be a function. All reducer is a function that takes in,
>> Brian: The previous state of the repo. And it takes in an action object, okay. This action object is something that it got from React. The user clicked on this button which dispatched action which is going to land here inside of this action, right?
[00:03:11] The state is going to be the previous state of the store, right? So let's pretend that we're only dealing with just location for the moment. So with the previous state,
>> Brian: Would be an object that is just,
>> Brian: Location is,
>> Brian: Seattle Washington was the previous,
>> Brian: State.
[00:03:46]
>> Brian: And, the action is going to be a new action, which is going to be of type,
>> Brian: Set location, and the payload for it will be San Francisco,
>> Brian: CA, okay? Or the state is that, so this is the previous state here, will look like that. And the action it looks like this, right?
[00:04:14] That's what's gonna come in here. This is gonna be a huge switch statement on action.type.
>> Brian: And on the case of SET_LOCATION,
>> Brian: It's going to dispatch to the location reducer. So return,
>> Brian: Location with state and action. So all this does is it delegates to another reducer, right?
[00:04:47] This rootReducer, 100% of what it does is just handout to other reducers and returns their values. Otherwise, this rootReduced would be astronomically large for a big project, right, so we have to separate these out to delegated reducers. And honestly, you can have reducers that delegate other reducers that delegate to other reducers.
[00:05:06] This can go as far and wide as you want. You can combined reducers as many times as you want.