This course has been updated! We now recommend you take the React Native, v2 course.
Transcript from the "Introduction to Redux" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Scott Moss: So yeah, that's pretty much HTTP React Native, it's just fetch. Obviously you need a reliable API, like we kind of have, but not really. So the next thing we're gonna talk about, Redux. I don't wanna get too much into Redux, cuz there's so much you can talk about, it could be a course on its own.
[00:00:21] But we're just gonna talk a little bit about it and how we're gonna organize our application. Because tomorrow, we gonna be building out a full application. So let's just get into that. So what we'll do is, first thing we want to do is npm install redux.
>> Scott Moss: Npm install --save redux and also react-redux, we'll install both of those too.
[00:00:52] And what redux is is just a state solution for our components. It's just like a single state store that we can use in our application. And then we create actions to change that state. It keeps our state predictable and it keeps it flowing in one direction so we can use it pretty simply.
[00:01:10] So now that we have that, what we're gonna do is, let's just set up a basic Redux app here to see how that works. So we'll create some state, we'll create a reducer, and then we'll create an action to change that state. And we'll see what that actually looks like, then we'll hook it all up.
[00:01:29] All right, so let's actually do this and I'll just go ahead. Actually, I'll push this up what I have right now right quick first.
>> Scott Moss: Cool, that's pushed up.
>> Scott Moss: All right, and I'm just going to use the same Reddit thing that I have here for the Redux example.
[00:02:15] So the first thing I want to do is start our app. I'm just gonna make a new folder and we'll call it, actually I'm just not gonna do the folders right now. Let's just put this all into some files.
>> Scott Moss: Make a new folder called store. So the way Redux works is you create a store which is where all of our application state is gonna live.
[00:02:38] And then we create a reducer for each part of our store. And what the reducer's job is, it's pretty much just to tell Redux how the new state is gonna look after its modified. Cuz all the state is gonna be immutable, so we just need to define hey, whenever I change this state, I'm gonna create this reducer which is gonna define how it looks now.
[00:02:58] This is how it used to look, this is how it's gonna look now, it's just reducing it. And then we created actions to actually change that state. So the actions change the state, which trigger the reducers. And then our components subscribe to that and then we get a update and it re-renders.
[00:03:14] So we're gonna walk through all that right quick. So the first thing we do is actually create a store. So what we'll do is we'll import.
>> Scott Moss: creatStore from redux.
>> Scott Moss: That's the first thing we'll do. And what we'll do is we'll just go ahead and we also need to import something from our reducers that we haven't made yet.
[00:03:42] So we'll just say from reducers
>> Scott Moss: Reducers, there we go. Now we'll just call this reducer, we haven't made that yet. And all we'll do is we'll just say export const store,
>> Scott Moss: Equals create,
>> Scott Moss: Store,
>> Scott Moss: With the reducer.
>> Scott Moss: That's it, so we'll do that, and that'll be our store.
[00:04:17] So the next thing wel do is go ahead and create our reducers. So we'll say reducers,
>> Scott Moss: And a reducer is just a function that takes a state and returns a new state, that's all it does. It's a pure function, no side effects. Given a state and an action that was called, return the new state, that's all it does.
[00:04:38] So we'll make one reducer for our Reddit data right here. We'll make a reducer that just gets the data and stuff. So the first thing we'll do is we'll come inside of reducers. We'll say const export, actually INAUDIBLE] we don't export this. We'll say const reddit, and we'll set that equal to a function.
[00:05:01] Remember, our reducer's a function that takes a state and a action and it returns a new state. So the state gonna the first argument, and we'll just set that default to be an array just in case there's nothing there, so default to an array. And then the next thing is gonna be an object with the action that was invoked.
[00:05:19] Now all we need to do is just return a new state. So my default, I'm just gonna say just return the given state, which is gonna be an array at first. So we'll have that,
>> Scott Moss: And then we'll just say export, actually, we're only going to have one reducer.
[00:05:36] So I guess we could just export this. There we go, so we'll just return that.
>> Scott Moss: So now what we wanna do is we wanna define some actions that when called, are gonna trigger this reducer. So actually we need to do that up top. We're just gonna do all this in one file, so we'll say an action type.
[00:05:56] Most people do those make constants with the action types in this case. We'll do the same thing, and we'll call this one FETCH_POSTS. And what it does it's the same, we're gonna give it the same name of FETCH_POSTS, there we go, and a string. And then we'll have another one that says, FETCH_POSTS_COMPLETE.
[00:06:25]
>> Scott Moss: So we have two actions now, we have an action that's called FETCH_POSTS and an action called FETCH_POSTS_COMPLETE. So all we have to do inside this reducer is depending on which action was fired, which type, we can change state around. So what we'll do is we'll just do a quick switch statement here.
[00:06:40] And the statement that we want to switch on is going to be on the action.type. So we'll say action,
>> Scott Moss: .type and the expression is, let's just say for FETCH_POSTS, we're just not gonna do anything for FETCH_POSTS. We'll just say return the state, whatever you are. And then the case for FETCH_POSTS_COMPLETE, what we want to do,
[00:07:09]
>> Scott Moss: Is we actually want to, the state FETCH_POSTS_COMPLETE, the action is gonna have a payload property. Which is gonna be the payload from the server, and we wanna set that equal to be the new state. So what we'll do now is we'll just say, just return,
>> Scott Moss: Payload, or I'm sorry, action.payload.
[00:07:33]
>> Scott Moss: And then we just need to set up a default for the switch statement.
>> Scott Moss: There we go.
>> Scott Moss: So we're gonna go over this when we put everything together. It's gonna make more sense when we see the picture. So if you're following along and like what the hell's going on?
[00:07:52] We're gonna go over it once it's all put together. But basically all we're doing here is we're just creating a reducer that's given an action, define what the next state's gonna look like. So the actions are these two actions right here, these two types. So when FETCH_POSTS happens, nothing, just return the state that was before.
[00:08:12] When FETCH_POSTS_COMPLETE happens, return the action.payload, which is going to be what was sent from the server. So this is going to be the new state.