This course has been updated! We now recommend you take the State Management with Redux & MobX course.
Transcript from the "Redux Store: combineReducers" Lesson
[00:00:03]
>> Steve: We could theoretically, the problem with this is, we had this one tree, and you could imagine a world, all right, we have one tree for all this state, this is great. This application grows, all of a sudden your web scale, and you have all these different things you're keeping track of, you don't want this reducer to grow, and grow, and grow, and grow.
[00:00:25] You would ideally like to be able to split it up. So unfortunately, React only has the idea of one reducer, cuz there's one store, there's one tree, there's one reducer. Everything I showed you in that very scientific chart before, unlike the flux one, doesn't get more complicated than that, that's it, that's the entire chart.
[00:00:46] But it is unwieldy to have a giant reducer, so let's go back up here. We've already looked at CreateStore, hmm, this one looks interesting to me, it's called combineReducers. We can only have one reducer, but what we could do is make a bunch of small reducers, and then when we set up the store, we could theoretically go in there and just combine them all into one.
[00:01:08] So we get have our cake of many small files, and we eat it too by having the one reducer that Redox wants. All right, very cool, I'm gonna get rid of this store right now, we'll keep the subscriber. So let's make a second store, or a second reducer, rather.
[00:01:26] We'll give a new state of the world we'll say const initialErrorMessage. I don't know why this calculator's gonna break yet, cuz all it does is add numbers. We can imagine a world where something goes wrong, not in my code, but in other people's code, something might go wrong.
[00:01:41] And in the UI we want to display an error message, seems legit. So we'll go ahead and let's create a new reducer, and this reducer's gonna do two things. It's going to either allow a error message to be set, or when the error message is dismissed, will clear away the error message.
[00:02:03] Yes, I know we could set it to an empty string, got it, I'm treating us to a helper method.
>> Steve: So here we go, I'm gonna just break this out a little bit for our own large screen sanity.
>> Steve: All right, so it takes the state of the world.
[00:02:27] We’ll start out with this initial error state, we’ll take an action, if the action set error message, we’ll change the message to that action’s message. And if it’s clear, we’ll set it to an empty string. So now we got two reducers, okay, so how do I combine them?
[00:02:47] Well, I do have that combine reducers, a thing from before. So I could do, store.create, sorry, yup. We'll say const store = create store, and that normally takes the reducer, and so what we're gonna do is gonna give it an object where we'll say calculator is the calculatorReducer.
[00:03:19] And we'll say errors, or just there's one error. You can only show one, it's just a string, unless we start concatenating them, but we'll say it's the errorMessageReducer.
>> Steve: All right, I'm gonna just bring this down so I don't get a, you don't have a store yet.
>> Steve: Expected the reducer to be a function, yep, I gotta pass it to combine reducers.
[00:03:47]
>> Steve: All right, so this takes an object of reducers and it, unsurprisingly, combines them, right, into one reducer that will be composed of the smaller reducers. Cool, so I have some problems here, as you can see. We got undefines, let's do store.getstate. I've got my calculator result right in there, cool.
[00:04:24] And we've got the message, but you'll notice that the console.log from before was looking for store.getState().result. That's now stored in calculator.result, and we have error, and it has a message. Where do these new keys come from? That's the reason I'm passing combineReducers as an object. So these functions could be anything, whatever the key I've given that object that combines all the reducers is going to now name space all of them.
[00:04:50] So it's not just one flat tree, each reducer will be part of one big reducer, kind of like in its own little nook. So we'll change this to
>> Steve: .calculator, .result, very cool. There it is, and now let's dispatch that addAction, you see it's 4, and if we do store.getState we can see the message is blank and we have 4.
[00:05:23] Let's call it again, just to believe in ourselves. It's 8 gone, and so now we have a way to break this apart, as in if we were doing flux and had multiple stores, we have multiple reducers, but it's still one state tree. And this is really great, because it means that, let's say I wanted to serialize the entire state of the UI.
[00:05:43] It's one object that I have to call Jase on Stringify on, that's it. One object that I send to the server if I wanna produce an error report. There's not a whole bunch of things I have to synchronize and get in lockstep together, I have one object, and that's effectively it.
[00:05:57] So let's also dispatch an error message, just to see it happen.
>> Steve: My subscription is still only showing the numbers, so still 8. But we go ahead and we say store.getState(), and you can see that we have this error message in there as well, right. So now it's we're almost with a full readout set up at this point.
[00:06:24] Right, this is effect, we could make due with taking these plain vanilla objects and manually dispatching them to the store. We could theoretically if we wanted to right now, we could subscribe a function that just writes to the document body and effectively just overwrite the page with the new UI every single time the store changes.
[00:06:43] We could effectively have a version of React without all the things that make React good like a virtual dom and fast rendering. We could just, anytime the store changes, blow away the entire page. Put this brand new markup with a bunch of string interpolation in it, everything's good, everything's great, right?
[00:07:00] That is enough, we know enough Redux right now to effectively build a single page web app. And we still have two more methods that we haven't gotten to yet, right, there is not a lot. Like, I think Redux stresses people out a lot, myself included, my former students included.
[00:07:19] When there's not a lot to it if you separate it outside of all of React, and connecting it to the components and stuff along those lines, so that's why we're kind of doing it in pieces, all right.