This course has been updated! We now recommend you take the React Native, v2 course.
Transcript from the "Creating the Store and Reducers" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Scott: So first we wanna do is, well, the first exercise that I wanna have you all do is we looked at the designs. We kind of just walk through about what components, actions and state we'll need an app as we walk to the designs. So what you're gonna have todo is you're gonna have to create a route component and you have to prep redux with the store, reducers and actions.
[00:00:24] Don't worry, we're gonna walk to that right now before I actually have you do it. So what I'm gonna do now is I'm just gonna take that todo app that we had from yesterday and I'm just gonna set this up to redux. And this time it's gonna be a lot more simpler to grasp is not a lot going on here like it was in the CSS explanation and now I have time to actually explain it.
[00:00:43] So this is just a basic todo app that we have that we start off with yesterday. If you remember, we're just a basic styles whereas you can type todo. Okay, remote debugger. So you can type what todo and I'll just show up on a page. Let me get rid of that remote debugger, this one slows down, there you go.
[00:01:03] So instead of just keeping the state locally, we're just gonna go ahead and put this in redux. Sorry, I have redux installed, so the first thing I wanna do is right head over to source. I'm just gonna make a new file here and I was gonna call this our store.
[00:01:17] So our store is literally where we're gonna be storing our application state. Except we won't be interacting with the store directly, redux will. We just have to give redux a store to where it can save our statement. So the way we do that is we import the method called createStore from redux.
[00:01:38] That's the first thing. And then what we also have to import is our reducers that we need. So [INAUDIBLE] reducers and embed it. But that's what the store is gonna need, so let's just go ahead and export and I would just say const store. Yes?
>> Speaker 2: Do you have a starter kit for this app we're gonna be doing or do we need to start from scratch?
[00:02:01]
>> Scott: There is gonna be a starter kit. Yeah. So we'll say export const store and that's gonna equal createStore and like I said, we're going to pass in the reduces here, so we're gonna go make those reducers. So now we're just gonna make a new file right here.
[00:02:17] And we're gonna say reducers.js. And the job of the reducers is to take the incoming state at a given action type create a new state. That's it. It is pure functions that take the old state and make a new state. Nothing more, that's all they do. So what we do is for our todo app, we've gotta kind of think about like what are the actions that we need to do.
[00:02:44] Well, if you go to the todo app, we have an action where we actually we type this stuff in, that could be an action, maybe not. We could probably keep that local, but definitely some of the actions are gonna be creating it todo. So hidden that and create that todo and update in our todo state.
[00:03:00] So I''ve pretty much created todo. That's like the only action we have right now. If we had another ability like toclick, totap this and have it removed and we make another action for remove todo. Or if we wanted to like sort of things out with right now, it's just created todo.
[00:03:13] So that's the only action that we're gonna have. So that's what we're gonna make, so we're gonna say const and we'll just save, this reducers gonna be todos and or reduces our functions. They're all functions. So the first argument that ever reducers gonna get is the current state.
[00:03:29] So I'm gonna say the state by default is gonna be an array. You do the default parameters in ES6 like that, so state if undefined set it equal to an array. The second argument you're gonna get is the action. So this is just a function, so this is why we do like switch statements because we want to create a new state based on the action type.
[00:03:51] So that's why a switch statement is what we do. So, I'll just go ahead and do a switch statement, although we're only gonna be using one action, let's just keep the same pattern. So switch on action.type and for the first case, let's actually create that constant for action and we'll just call this TODO with the same name.
[00:04:13] So we have an action called CREATE_TODO. Yes, yes, go away, thank you. And then what we wanna do is we wanna go ahead and make that case there, so the case is gonna be CREATE_TODO. So when CREATE_TODO happens, all you wanna do is just update the state with the new TODO that was passed in on the action.
[00:04:31] So remember, the state is gonna be an array. So when someone creates a TODO, all we wanna do is just return a new state. So we create a new array and what we'll do is we'll go ahead and put the new TODO at the top, so let's say action.
[00:04:46] And let's just say all the data we pass on to the action is gonna be on the payload property. Let's just make that a standard now. Action.payload will always be the data that we send with our actions. There's action.type which is gonna be actions type, actions.payload which is the data that we send on an action and then our optional action.error if there's an error or not.
[00:05:04] So let's say action.payload is always gonna be the data. So in this case, the payload would be the actual TODO object that we created over here. So we're gonna put that at the top of the array or at the beginning and there was gonna put any stuff that's already there.
[00:05:16] So we'll spread over it like that. So again, we're creating a new array placing the new TODO in the beginning of the array. And then iterating over any other TODO that might have already been in there, so we don't forget about them. And that's the new state. So whatever you return is the new state.
[00:05:32] Do you see that? Any question on that on this pattern right here?
>> Speaker 3: There was a question about does the name TODO is in the reducer create the key TODOs in the store state?
>> Scott: No, it doesn't. So the name of the reducer here is irrelevant, but because when we actually combine the reducers.
[00:05:51] The object that you pass to combine reducers, that's gonna be the key inside of the actual state. So it's a pattern to name the reducers with that same key. So no, the name doesn't affect it. But if you keep the pattern of keep the names consistent alternately, yes, it will affect it.
[00:06:07] Which is what we're gonna do, but this could be called anything, it's just whatever property you're using the combined reducers. And then default statement, we need to go ahead and just return state which is an empty array. So if your reducer returns undefined, it will draw an error.
[00:06:22] Also if you try to mutate the state in a reducer, it will throw an error, you can't. When you take the state, I can't just say state.push action.payload. And then just return statement. I can't do that. Redux is like nope, that's not happening cuz you're mutating the state.
[00:06:46] So that's why we made a new array with an array literal. Passed in the payload at the top and iterate over any possible TODOs that may or may not be in there. So any questions on that?
>> Speaker 4: So what actually prevents you from mutating state?
>> Scott: Reduces does a check cuz if it is doing any quality check on the data structure, are these two the same?
[00:07:14] Nope, get out of here. Yeah, that's pretty much it.
>> Scott: Any other questions? Cool, so we have that reducer and then, let's just say we'll make another one even though we probably won't use it. We'll just call this one user just to reiterate it. So user is also a reducer and let's say its default state is gonna be an object.
[00:07:39] And then it also takes an action. But because we're probably not gonna use this one right now, all we can do is we can just come there and say hey, just return state which is gonna be an object. So now we have two reducers. And remember, I said we need to pass the store in store.js a reducer but we have two of them.
[00:07:59] So what we can do is we can use a method provided by redux to actually combine these reducers and pass to the store. So what we can do there is we can just say imports combinereducers from redux. And what we'll do is we'll just go ahead and exports reduce or export const reducer equals combineReducers which takes an object.
[00:08:33] And this is where the names actually matter, so whatever properties you pass into this object. Those are gonna be the state properties that you get inside your components. So I'm just gonna keep him saying we have a TODOs and we have a user. And because they're the same name and of the properties that I want, I can just say todos user, just like that.
[00:08:54] Which is the equivalent of doing todos: todos, user: user. This is a shortcut if I just do that cuz they're both the same name. The property value are the same variable name. Everybody get that? So that's just gonna get in this and now that we have, that I can head back over to the store.
[00:09:13]
>> Speaker 5: Can you show me the import again?
>> Scott: Yes. Import combine with redux.
>> Speaker 5: Okay, thanks.
>> Scott: So now that we have that, I can head over to the store and I can import that reducer from reducers, there we go. And I can just go ahead and pass it here.
[00:09:40] Yes?
>> Speaker 6: Is there some reason you wouldn't use default in your export for this?
>> Scott: No, you can use default, it's totally up to you. If you use-
>> Speaker 6: Okay.
>> Scott: Yeah, so if you were in here and you were like, export default, you wouldn't need the name, you wouldn't need the equal sign.
[00:09:55] You would say, export default combineReducer and then on the store, you just won't need this brackets. And then you can call this whatever you want, you can call it a, it doesn't matter.
>> Speaker 6: Right
>> Scott: Yeah, I usually do that. I just don't for some reason because it causes bugs for me sometimes.
[00:10:11] Because I use ES6 in node and they don't have the default things or breaks. I'm just in the habit of doing this.
>> Scott: Cool, so we have a store, we have a reducer. Only thing we've gotta do now is actually hook it up to our component, make some actions and dispatch them.
[00:10:32] Any questions so far? Everybody understand what's happening right now? All right. So we've got a store and we have some functions. That's just going to create a new state given an action. That's it.