Binding Actions

[00:00:00]
>> All right, some little things that we can do here, which is before. Here, we have to dispatch every time. Now, you're cool with this. The issue where this comes down, to what seems more maintainable for you. You can, dispatch each one of those actions. You could also theoretically use something like bind action creators.

[00:00:21]
If you wanted to. So you could say for instance. Because they const actions just as we did before. Where we could say bind action creators, we can pass it increment, decrement and set. And give it a copy of that dispatch. As well, so now we could theoretically say, if you had better ways to name these.

[00:00:55]
You could even. Since it is one dispatch to actually see another thing, we can do here. But you could actually just call them as their functions. They will automatically dispatch this. Because they are bound, as we saw before, applies that actions. All right, let's see. Let's make sure, I did the right balancing of my parentheses.

[00:01:20]
Missed one, extra one there. All right, so now these look like normal functions. This one is, we still got a fix. They look like normal functions, but they behave by dispatching. So you could theoretically use these instead. They hide the fact that, you have to pass these functions dispatch every time.

[00:01:39]
It's up to you whether or not you like this. The other option is, you could theoretically pull this out into your own custom hook. So you could imagine, something where you just had use all the actions. That are automatically bound and you never think about this again. And every component, could even use like a used counter that nestled together all of this different logic.

[00:02:00]
Let's just take a look at what that might look like for a second. And then, it's definitely like one of those extensions and not necessarily I think that you need to do. Let's go ahead and let's make one called used actions for instance. So use actions is going to be, a hook that we are going to use.

[00:02:20]
In this case, we'll export const use actions. And we'll talk a little bit about this in a second. These actions will say actions. And what's gonna happen here? Well, we're gonna have our dispatch, right? Because we're gonna bind everything to this dispatch. Then we are going to say.

[00:02:54]
With all the actions and then dispatch. So now you can theoretically pull this out any way you want it to. We can pull this into the counter. And we could say, instead of dispatch now, we could say increment decrement and set, Shall we just call this actions right now?

[00:03:36]
Called actions, we get rid of this and this. And so these will be ones that are. These will automatically bind action creators for us. The other option is, we could theoretically take this logic and make a use counter as well. So let's try that out. And basically make reusable logic, for dealing with our counter anywhere we want our application.

[00:04:03]
So he'll make a custom hook and we'll say. Export const used counter. And this is going to pull in our. Use selector. We're gonna grab state. We'll say state account. And we'll say our actions. Equals use actions. And we'll pass it, increment, decrement and set. Pull these. Their keys without auto encoding.

[00:05:00]
Increment, decrement and set. Where we'll pull those in, from our actions as well. ./actions. And then we can just return all of this out. So as they count. And all of our actions and then in the counter. You can get rid of all of this now, we'll say count increment, decrement and set.

[00:05:48]
And now we don't even need to put it on an actions object, cause we'll get that off the hook. So now, yeah, this is using Redux, under the hood. And it's using use-selector and use dispatch. We've just wrapped that all in a custom hook, that encapsulates all of that for us.

[00:06:06]
So if you needed to change from Redux to something else later. You can simply pull in everything like this as well. Let's just verify that works, cause a lot of coding without a lot of checking. And everything still works. Incrementing, decrementing and resetting. The one further thing that we can do, is in our use-actions.

[00:06:25]
Is action should always be the same object. Dispatch we know as the same object as well. So we could say. We could pull in. We could use memo on that, so that we get a memorize version as well. Saying as long as you get back in the same actions.

[00:06:50]
And the same dispatch, you don't need to generate that object again. Every time. Yep. All right, cool. And that actually creates our, at this point we have predominantly hooked up our. React or redux store, to react application using hooks. We're going to take a break. And when we come back, we're gonna look how to do it using higher order components.

[00:07:20]
We'll talk a little bit about some of the differences. And why that you might use either one as well. We have one quick issue that we need to solve for. Which is we have this used memo, but we actually have to give it a function to call as well.

[00:07:35]
And that will actually go ahead, and get us to the point, where we actually have the used memo working the way that we expect it to.