This course has been updated! We now recommend you take the React Native, v2 course.
Transcript from the "Connecting Redux to the Component" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Scott Moss: So what we gonna use Redux for now is we're gonna fire off an action when this button is pressed and then we're also going to list them here. So the first thing we want to do is we've got to figure out, so where do we actually want to put this action?
[00:00:19] Do we wanna put it in this Todo.js? Do we wanna put in this TodoForm? So typically what you would do is you would put it in the highest component and you would pass it in as a prop. That's typically what you would do but we're only two levels deep so what I'm gonna do instead is actually I'm gonna do it here in this TodoForm.
[00:00:35] I'm just gonna show you how to connect and we're gonna use the action here and we're just gonna to dispatch from here. So the next thing we need to do is in this TodoForm is we'll import,
>> Scott Moss: Connect from 'react-redux'. And what connect means is all this is going to do is just look at the context of this component.
[00:01:00] And it's gonna give this component the state that we want and attach it to a properties. That's it. So remember the only two piece of state we have in our store right now which were todos and user. This is going to allow us to grab those and attach it to our properties, our props coming in.
[00:01:15] The reason we want to do that is when that state updates, so will the template for this for this component. So that's why we're gonna attach it to the props. So what you want to do now is we're gonna use connect and all connect does is it takes two optional arguments, the map of the state you want and then some possible actions.
[00:01:35] So the state that we want is actually none. We don't want any state in this form, we actually only want to do an action. So, we'll say const mapActionsToProps, and that's just going to take the dispatcher and redux. And all we need to do is just return an object here so I'm gonna just do an implicit return by using these parentheses and then placing an object in there.
[00:02:03] That's just saying return an object. That's what that is saying right there. So I'm going to do that. And then I just want to make a method called, as I said, createTodo. So createTodo, that's what I want to do. And what createTodo is, it's just gonna take a Todo,
[00:02:22]
>> Scott Moss: And all it's gonna do is dispatch an action and an action is just an object that has a type property, remember we talked about this, a type property and it's gonna have a payload. So the payload is going to be the Todo. And then the type we had defined and the reducers is this CREATE_TODO.
[00:02:42] So I'm just gonna export that so we can use it. There we go. I'll just type it in for now. So the type is CREATE_TODO
>> Scott Moss: So everybody see the flow now? So when this action is dispatched with this type CREATE_TODO, Redux is going, okay, let me head over to the reducers, let me run that through the reducers right quick.
[00:03:07] It's gonna run it through our reducers. Look, we have a switch statement for that specific type. So when it sees that, now it's gonna execute this. And that's gonna be the new state. And then when that new state comes, whatever is subscribed to the new state, which in this case nothing yet, is gonna be updated with the new state.
[00:03:24] Does that make sense, yes?
>> Speaker 2: Will it run through user too?
>> Scott Moss: Yeah, it'll run it through user which isn't doing anything but it will, it will run it through user, yes?
>> Speaker 2: Question from Charles. Do you generally use action creators rather than actions in your own work?
[00:03:40]
>> Scott Moss: Yes, I always use action creators and you will too. And in the sweat book app, there's action creators.
>> Scott Moss: Action creators is a function that makes an action compared to what we just did which is just we inlined this action here. So typically you'll have a function that makes this action for you.
[00:04:01] But we just inlined it. Cool, so now we have this map to actions and then what we can do is we can connect this TodoForm, [COUGH], excuse me.
>> Speaker 3: I have a question.
>> Scott Moss: Yes.
>> Speaker 3: Line 12-
>> Scott Moss: Yep.
>> Speaker 3: I don't know if this is an ES6 thing.
[00:04:18] I'm confused by the the syntax where you're returning an object but it's a function inside that object?
>> Scott Moss: Yes, so what's happening here is let's just get rid of this right quick and then we'll come back to it. So the first thing is mapActionsToProps is a function that takes dispatch as an argument, right?
[00:04:35] And then I'm implicitly returning an object, so-
>> Speaker 3: I get that part.
>> Scott Moss: Okay.
>> Speaker 3: It's just the function inlined inside an object literal.
>> Scott Moss: So this part right here, this is the method shortcut. You can create methods on an object. The same way you would do it on a class, the same way we did it here.
[00:04:53] It's the same thing, yeah. So you can do that on objects too now. But unlike a class, you still gotta put commas after them for the next one. Whereas a class, you don't need commas.
>> Speaker 3: Thanks.
>> Scott Moss: Yeah, the other way you can do it is you can just say this and it will still be the same or use the function keyword.
[00:05:13] Either way will work.
>> Speaker 3: Okay, thanks.
>> Scott Moss: Yep, any other questions? No, okay,
>> Speaker 2: Yep, yep, sorry. So Mark H from the channel is asking can you review, why not set up connect and action dispatch in Todo, the higher level component rather than TodoForm?
>> Scott Moss: You can, you can.
[00:05:35] I was just trying to get a deeper example. But yeah, you can set it up but typically what people do is, see the Todo is the root. It's almost an anti-pattern to connect in a root. And the only reason that's a good example here is because we're doing so much in the root, but in most applications you wouldn't do all of this inside of a root of the app.
[00:05:59] This root of the app would just be an empty shell that's somewhere else. I mean, in fact, that's probably what we can do, would make more sense if I just do that? We could just do that right quick, actually. Let's just make an empty shell. And we'll just call it main.js.
[00:06:23]
>> Scott Moss: So this is a real pattern which this is what we're gonna be doing. So you just have an empty shell and we're just gonna export a const called Main and it's literally nothing. It's just going to house our other components. This is gonna be a entry point.
[00:06:41] That's all it's gonna be.
>> Scott Moss: Oops.
>> Scott Moss: There we go. And then it will import Todo in here.
>> Scott Moss: And then we can literally just put Todo like that, just like we have before. There we go. So we'll just have main there, bring a Todo in and just head over to our index.iOS or Android, whichever one you're using, and just bring in Main.
[00:07:24]
>> Scott Moss: There you go.
>> Speaker 2: That's not gonna work, though. Cuz of the const main, aren't you.
>> Scott Moss: Yeah, I have a const Main. So we can say Main as Root.
>> Scott Moss: And we just call this Root.
>> Scott Moss: There we go.
>> Scott Moss: So it's still gonna be the same.
[00:07:49] So now it actually makes sense to do the connect inside of Todo and not TodoForm because you don't really want to connect to this thing right here. This is a thing that's being provided. It's usually the children of this, but in our example, our root was actually doing so much.
[00:08:04] It was like whoa, which one? So that's why I figured it make more sense if we do that. So now what we can do is yeah, we can go ahead and bring that connect over from TodoForm,
>> Scott Moss: And bring it into Todo.js. Same code here. There we go.
[00:08:25]
>> Scott Moss: All right, so we have the action. We have this connect. Now we're actually gonna connect it. Before I connect it, any questions so far? I just made some quick changes.
>> Scott Moss: Any questions on why I changed it? So I changed it because the root component again is usually just a shell.
[00:08:43] Usually just a big container that does nothing. But in this example, it was doing a lot so it was like well, where do I connect? So I made sure that we had a shell called Main.js that does absolutely nothing and then now we can connect inside this Todo component which is actually more interesting and is gonna do stuff.
[00:08:59] So that's actually the approach you're gonna see in every Redux application. All right, so now that we have these actions here. What we can do is we just wanna go ahead and attach. We want to fire off this action whenever we want a Todo to be created. Let's just do that now.
[00:09:14] So where are we creating a todo? Where in here is the Todo being created? What method?
>> Speaker 4: handlePress.
>> Scott Moss: Yeah, handlePress. So in handlePress, instead of setting the state here cuz we're not gonna be keeping track of state anymore, we actually just want to go ahead and fire off the action of new Todo.
[00:09:30] So we can just get rid of all of this cuz there's no more local state, actually there might still be a newTodo. But we'll just get rid of that for now. And then in step, what we'll say is we wanna be able to access this method on the properties of this component.
[00:09:48] So that's where connect comes in. So before we connect, what we're gonna be able to do is we're gonna say this.props.the name of the method we want which is createTodo. If you look at createTodo, it just takes in the Todo which is just gonna be the text. And we know that the text is gonna be this.state.newTodo.
[00:10:13] So that's not gonna work because we haven't connected it. So now if we actually want to connect it, there's a couple ways we can do it, but I'm gonna do it the simplest way. I'm just gonna rename this to _Todo cuz I need that to do namespace. And underneath it what I'm gonna do is, yeah, underneath it, I'm gonna come down here and I'm gonna say export const the real Todo = connect.
[00:10:47]
>> Scott Moss: So we're gonna connect here. And let's just bring this down here so we can have it right next to us so it makes more sense.
>> Scott Moss: And we're gonna pass in null here for the state. So the first argument is if you wanna map state to the properties.
[00:11:01] We're not doing that just yet, we're just mapping actions. And we're just gonna pass in that function that we just made called mapActionsToProps. That's gonna be the second argument. So we'll pass that in here. mapActionsToProps, and then connect returns a function which takes the component that you want to connect to, in this case _Todo.
[00:11:25]
>> Scott Moss: So this is saying connect the component _Todo to Redux. And I want these actions attached to the props and the only actions that we have is this one that we made called CREATE_TODO. So all that it's literally doing, it looks like a lot but all it's doing is just merging this object into our properties.
[00:11:44] That's all it's doing. It's just calling merge and like here, here's the property. That's all it's doing. And the reason it does that because it wants to attach it to the properties because when the props of a component update, the render function will be called again. And that way our app is always in sync with the state.
[00:12:01] But that's all it's doing. It's nothing fancy. It's just a merge on the props. So now we can say up top, this.props.createTodo, which is going to be calling this method. Does that makes sense? So when we say this.props.createTodo, we pass in this.state.newTodo. It's going to dispatch this action, which is then gonna go into the reducer.
[00:12:26] Hit this, create a new state for us and then now all we need to do is just subscribe to that state somewhere and our app will just be like magic.