This course has been updated! We now recommend you take the React Native, v2 course.
Transcript from the "Adding the Store to the Component" Lesson
[00:00:00]
>> Scott: [SOUND] So now we have our actions now all we have to do is wire these up to our component and we can actually use them and modify the state. So there's a few ways we can do this. What we're going to do is use the best way it's a little more set up but it's definitely the best way to do it.
[00:00:22] We need to head over to our root component which is either an index to enter digests or index the iOS. Either one of which I wonder using or both and instead of just returning to do here. We actually have to return. We have to import. { Provider } from 'react-redux'; so provider pretty much just provides in the store to all of our components that way you can subscribe to state changes.
[00:00:56] It does all that for us and we can set it up manually, do context but providers is gonna do it for us. So now we want to return this provider.
>> Scott: And inside of the provider, we're going to place in, our application like that. So to do, or whatever and that's actually what I want to do is I want to put a view here.
[00:01:22] There we go. No, let's not do that. We'll say Todo, there we go. And then we just need to provide the provider with a store. So now we'll say, import store from our store which is in src/app/store.
>> Scott: And we'll just pass the store here.
>> Scott: There we go.
[00:01:59]
>> Scott: So now. All the child components of Todo and todo itself is actually is going to have our access to the store and we can do things with that. So I'm moving kind of fast, I'm doing it on purpose. Don't worry, I'm not meant for you to keep up and tag along right now, promise.
[00:02:16]
>> Scott: So now what we're going to do is we're going to head back over to Reddit and now we're going to tie this stuff up all together. But before I go head into it any question so far? We just covered a lot.
>> Scott: I went like full steam into Redux.
[00:02:32]
>> Scott: You guys said you wanted Redux. You voted. There was a vote. People vote Redux. No questions everybody understands this.
>> Scott: All right cool. Okay, so now what we do is we need to use a few things we need to do we need to wrap this Reddit component.
[00:02:58] We need to connect it to redux and say hey this is the state that I want to be the actions that I want to perform. So we have to do that first move because Reddit is not a child of todo we also have to like place it inside the child or whatever the root is.
[00:03:14] And the root is in this case to do So we have to place it to be a drive Todo in order to get access to redux store and what not. So there's a lot of stuff that we have to do here, I don't really want to cover all that stuff because it's kind of complicated.
[00:03:28] So probably we're take a quick shortcut to get it to work, and it will go from there. So what we wanna do is import,
>> Scott: From, let's do connect react,
>> Scott: redux, there we go. And then all we have to do now is the point of redux is like now this component like hey redux this is the state that I want.
[00:04:00] And when it changes, I want you to rerender or render my render function. So in a state that I want to describe when it changes, call render again. So all the status is updated. Does that make sense? So what that looks like is this. So instead of binding to like this local state, this post here.
[00:04:19] What we're going to do is we're going to have redux store this post for us. And we're going to get it from redux from as a prop, a property coming in. And then all we have to do is we're going to take this function right here. And we're going to actually use that we're going to create an action instead.
[00:04:35] And that action is going to go ahead and change the state for us in the post is going to pass on as a property.
>> Scott: It's kind of harder than you are so the way it works is right. You're inside of a component and it's like I need some post and reddit.
[00:04:50] So what you do is you click a button. That button fires off an action. That action is nothing but object that has a type which is this. You know fire of action as a type and then when action is fired is dispatched by reddits. Reddit is going to start running all the reducer functions.
[00:05:09] So the reducer functions come in like okay, you dispatched something of type fetch post complete says no come I am I okay. Execute this and what this is is hey just take the payload property of the action that you dispatched and make that be the new state. And that's going to the new state for Reddit.
[00:05:27] So now all we've got to do inside the read a component is described to the Reddit State. So there are the state changes by an action to Reddit component re renders. You see that it's like a unit directional data flow you fire it goes all the way up and then comes right down.
[00:05:43] It was always the reduction it comes right down versus right now it's just a local it's stuck inside here. It's like yup it's back and forth. Whereas with a redux is going to go out go to redux go there reducer and come back down to the properties to the pair of components.