This course has been updated! We now recommend you take the React Native, v2 course.

Check out a free preview of the full React Native (feat. Redux) course:
The "Subscribing to the State" Lesson is part of the full, React Native (feat. Redux) course featured in this preview video. Here's what you'd learn in this lesson:

Once the component is connected to the store, it can subscribe to the state by mapping the state object to the corresponding component properties. Scott does this by binding the todos reducer to a property named “todos” inside the component.

Get Unlimited Access Now

Transcript from the "Subscribing to the State" Lesson

>> [MUSIC]

>> Scott Moss: All right, so now we're actually gonna subscribe to the state, and then we're gonna see all this work. And this is actually pretty much the same thing, we already did all the hard part. To get the state, we just make another function here called map. You can call it whatever you want, but I'm was gonna call it mapStateToProps cuz that's what we're doing.

[00:00:18] And where it’s map actions to props takes a dispatch that we're going to use. This is actually just going to take the state, so the actual state object that we created to store, let's call it store that makes sense. Let's just call it state this going to state and just like map actions to props.

[00:00:37] It just takes an objects I'm going to do the same thing, I'm going to take an object here. And the state that I want is I'm more interested in todos I was always interested in, and that's going to be state.todos. And the reason I know that's state.todos, it's because if you go look at the reducers and combine reducer you put it right there.

[00:00:55] The property called the property name is todos whose value is also the todos reducer. So this is the state that I want right here. I want that state and I'm buying to get to the property with the same name todos. So now inside this component I can say this stuff props got todos and I'll get that state.

[00:01:18] So now that we have that. Let's head down. Here and instead of iterating over this.state.todos, we want it over this.props.todos. Everybody see that? So we'll just go iterate this.props.todos. And then I think there's actually one more change I would wanna clear out the input. This.setState newtodo is a blank string and now we don't need to keep track of the state.todo this because it's a redux now.

[00:01:53] We're gonna keep track of this. I mean I guess you could put this in redux but that means that every single keystroke or you reduces or go to fire. So usually what forms. This is like the only time I ever keep stating my components is with forms. That's the only time any other time like just put it in a redux.

[00:02:08] Put every single thing in a redux it'll help you out so much more. But with forms I'm just like well my whole application doesn't need know about this thing that I'm typing in right now so I'll keep it locally this component. But if your whole app needed to know about this for some reason, if you had an app that was, I don't know.

[00:02:23] If you were typing in here somewhere and the rest your application needed to know about it ,then I guess that makes it a redux but most of time it doesn't. So just keep it here. Otherwise on every single time we do handle change that's gonna update the value which we'll call the action of data the stuff Redux it would just be crazy.

[00:02:42] So I don't do that. Yes.
>> Speaker 2: Is there a reason that you are tracking the form state in to do instead of to do form?
>> Scott Moss: Is there a reason?
>> Scott Moss: No there really isn't a reason, I was just trying to keep to do form as like super lightweight and minimal as possible.

[00:03:01] I mean you could track the state in there, we'd just have to make to do form a component, and not a stateless component now. Right now it's like super stateless, it doesn't know anything. Whereas if I wanna keep track of a state here actually could. It would still work the same way.

[00:03:15] I just wanted to be able to have the consuming component have power of what they wanna do with the state, that's about it.
>> Speaker 2: If todo form, track the state could todo be stateless?
>> Scott Moss: Yes but we still have to like have these methods area way to do like the handle or I'm sorry to handle present that we still have to have this.

[00:03:42] Yeah we do that but so we're going to get into the two different types of points container and you and I call it. You either some people call it like representational components. So a container component is like to do is this house is all the other UI components like, todo form.

[00:03:57] So like, when it comes to actual like keep in track a state with forms. I think it really depends on really wherever you want to put, if you want to put it there like a silly five. I think it only matters when you get to things like application state where you want to store it.

[00:04:10] So, yeah if you wanna to put it in todo form, totally do it as I don't think there's anything wrong with that. This is whatever you want. Like I said, the only reason I did it is that is I just wanted this to be super simple. Whereas I'm okay with this being a little complex cuz it's already doing all this connect and all this other stuff so I was like whatever.

[00:04:27] I'll keep the complexity here and keep this one simple. But it's totally up to you.