combineReducers

[00:00:00]
>> Steve Kinney: We're getting there, right? We've seen couples, we've seen creative store, combineReducers is a useful one. What it allows you to do is effectively, you can you can imagine a world in a large scale application, this function gets out of control, right? What combineReducers does is it allows you to combine reducers right?

[00:00:30]
Yeah, right? and you can basically take that large tree and break it down to a series of smaller trees that becomes a little bit more manageable, right? So like, all right, the context in the marketing campaign said that might be one reducer for adding context. Or like lists, we'll see it when we build the compound board, we'll have lists, we'll have cards, we'll have users, we'll kind of break those out into separate pieces.

[00:00:54]
So combineReducers is effectively, we'll actually take this first reducer, just give it a better name, we'll call it calculatorReducer, neat. Let's change it over here, so I don't break anything.
>> Steve Kinney: We'll actually get rid of this for now. And what we'll say is,
>> Steve Kinney: Give ourselves some space.

[00:01:25]
>> Steve Kinney: We'll say reducer = combineReducers. CombineReducers takes an object, right? Because eventually we're splitting up that tree.
>> Steve Kinney: And we'll say,
>> Steve Kinney: Calculator,
>> Steve Kinney: Is calculatorReducer.
>> Steve Kinney: All right, cool, and then let's just cancel out that one.
>> Steve Kinney: All right, we haven't hooked it up to a store or anything.

[00:02:01]
We're just taking a pure JavaScript function, we're parsing it to those combineReducers.
>> Steve Kinney: So there's a lot of extra stuff in there, right? But we get this function that is a combination, right? We've got some warning messages and stuff along their lines. And it basically allows us to create sub-reducers in here as well, right?

[00:02:23]
And so the calculator one will get only the calculator branch of the tree, right? So our initial state might now be something like,
>> Steve Kinney: Calculator 0, error is no error, right? So, this reducer is only gonna get this wing of the tree, right? If we had an error reduce that we named error, you get that wing of the tree.

[00:02:54]
So allows you to take this giant object that Redux is holding on to, and breaking it up into manageable pieces, right? All right, we can deal with all this stuff involve users over here. All this stuff involves cards over here, right? And you can break this up into as many as you want.

[00:03:09]
The really cool thing is that the actions still flow through all of their reducers right? So, if let say we've got a blog post and comment, right? We want to remove the comment completely from the set of comments, and we also wanna remove the blog post pointing to that comment.

[00:03:33]
That remove comment will flow through both reducers, right? And so you don't need to like, fire off multiple actions or anything along those lines. You can simply listen for the same action in that payload multiple places. Yeah, because it's all it's effectively one giant store. This is a big change from other database management libraries like flux.

[00:03:54]
Flux you might have all of these different stores, right? That you'd keep it all separately. This is one giant object, and it gives us the ability to kind of let them flow through each of them. So all combined producers does it's effectively not unlike compose, completely separate. We didn't actually make a store or anything, it just takes multiple functions and pair them up with different parts of this state object, all right?

[00:04:18]
Super cool. Replace reducer, I don't feel the need to talk about [LAUGH]. It simply take that function and swaps it out with another one, right? I did mention this earlier, I'll just say it again though, but you can theoretically use the spread operator take what the current reducer is, add another one with combineReducers, right?

[00:04:42]
And then replace it. So you can kinda add more reducers as you go along if you want to do some code splitting and lazy loading and stuff along those lines.