Connecting State Hooks to the Store

[00:00:00]
>> So redux is now bound to react. We're not doing anything with this. If we were to go through the code base right now, we can say is effectively a bunch of particularly static components. But what we'd like to do at this point is to begin to pull in that data that we have from our state and actually see it in place.

[00:00:20]
One of things I will point out is we have count equals zero, so first thing you have to do is to actually take this hard coded of zero and replace it with actual state from our store, so we go ahead and we'll do that, so in my counter the first example am gonna hox, so I have this hard coded zero.

[00:00:43]
What I'd love to do is I'd love to pull in the count from my state instead. This is pretty straightforward. You can actually use this use Selector. And what is the selector, a selector like most things in Redux is a fancy word for a function, right? You're saying like, okay with the entire state object, what do you actually want from the entire state object?

[00:01:09]
So we'll say only take the entire state object go get state count. Right and that will now return zero. And this hook has a bunch of nice things, which is some amount of like memorization to keep track of like if this hasn't changed try not to rerun this more than we have to.

[00:01:26]
And so now this count is in place. I can go ahead into my reducer and just to verify that it works. We'll change this to like 400 and we'll look at our application and you can see that it is now 400. We are now, we have state from Redux already into our react application the kind of cool thing that I can do is since I have the full reducer wired up, I can go into these Redux dev tools.

[00:01:54]
It's pretty small, you can see this little keyboard, you can dispatch actions from the tools. So I'm going to dispatch an action of the type increment. And you can see that effectively, everything is pretty much wired up at this point. You can see all the actions logged. I can go ahead, rewind, play it forward and backwards.

[00:02:16]
With all the state changes, and this is one of the really powerful paradigms, that the holy Redux model gives you a very simple actions and just very like pure JavaScript along the way is you can basically serialize each previous state roll back and forward as well. Awesome, so it'd be great if we could get the buttons working now, right?

[00:02:37]
So I'm gonna do one button and then you are going to do the rest and then we will reconvene and think about it. I'm gonna do set, and then you are gonna do increment and decrement. So let's go take a look. Now in my counter, I've got these buttons, I'd love to add some on click handlers to them.

[00:02:56]
We can make this we'll play with this a little bit. But we can also get a copy of dispatch. And this is a little bit different than how use reducer works. Use reducer takes the reducer in that component, right? And you could do in the context API. And then it gives you both the state and the dispatch.

[00:03:14]
However, like the way Redux works is it gives you you select to get the state anywhere you need it, and then use dispatch to get you the dispatch whenever you need it. And this will always be the same store that dispatch object. So if you're worried about like.

[00:03:28]
Memoization or caching, this will work for you. So the question was, previously, when I've used react Redux, I've used this Connect Method to wrap a presentational component with all of the Redux goodness to pass everything as props use selector is the replacement for map state to props, which we'll talk about in a future section.

[00:03:48]
Use dispatch is the replacement for map dispatch to props. So if you've used react Redux before, and you've used the Connect API, these two hooks are the parallels to those two objects with the Connect API in react Redux. So I'm gonna take the button and I'm just gonna say on click, on clock even will say, go ahead, and we have to call dispatch.

[00:04:17]
And you're thinking, isn't this a use case for bind action creators, then yeah, it is and we'll deal with that in a second. We say set and we'll set it to zero. We just pull in set from our actions. And I'll go back here and now hopefully, I can reset it back to zero.

[00:04:38]
So I've got set working, you're gonna pull in increment and decrement then we'll take a look together and we will add the ability to set the counter to a given value when we come back in five minutes.