Redux Toolkit Store

[00:00:00]
>> Now that we've seen what makes up a slice, that it is just a bunch of smaller pieces. And we can kind of explore how to then also make a slice and then see that there are pieces that we could use anywhere as well, right? And I think I have a Belabor the point of any piece of this is accessible to you.

[00:00:20]
Let's actually kind of see a little bit more of this through. So we've got this here now. And I would like to theoretically hook it up to a store. That seems like a reasonable thing to do. The other kind of nice batteries included part of this is that previously you had Redux's createStore.

[00:00:46]
I mean, you still have Redux's createStore. And then there was a set of things that one needed to do, okay? I mentioned this before. We wanna hook up the Redux developer tools, well, that's a step, right? And there are some other helpful pieces. There's middleware out there that makes sure that you're actually making stuff immutable in development only.

[00:01:08]
There is middleware out there like, I would like to make some kind of asynchronous request at some point ever, cuz I've heard that's a thing that we do in websites. I wanna make sure that the data I'm storing and everything is serializable, right? So it's not class instances, it's just like JavaScript objects that can be converted to JSON.

[00:01:28]
So a bunch of just common things that you would have to do as a rite of passage every time, we basically kinda get for free at this point. So I'm gonna make a store file. And I'm gonna keep this separate for reasons that we will see in a second.

[00:01:45]
I'll tell you the kind of general theme for some of the separate files I'm making. Could you put some of this in index.tsx? Yes. Later on we're gonna make some custom hooks. Could you put them in this file? Yes. Generally speaking though, depending on what build your tool you're using and what version of that build tool you're using, you will always start dancing as soon as you put too much stuff in one file and start requiring it.

[00:02:10]
Especially at this early bootstrapping stage of your application, you will play with the circular dependency like roulette. And at one point something might break. So separating the stuff out in the files occasionally like breaking it apart usually makes either A, not getting into a situation easier or B, at least triaging what the issue was a little bit easier.

[00:02:32]
So could you put in these files? Yes. Should you? Maybe not. Are you immediately gonna be in trouble if you do? Depends on the build tool and the version of the build tool and other complexity issues as well. But especially since we're live coding today, I'm gonna play a little bit safe.

[00:02:52]
And so with breaking stuff into small well-defined files, that's the way things are responsible. How about that? So we can put this out there. We will need to export some stuff from our slice in a second. But let's create the basics of the store. One of the major differences from how we might do it in just regular old Redux.

[00:03:14]
And if you have it set up in regular old Redux, that's fine, leave it. You can, that's absolutely acceptable. This is just kind of some of the advanced features that we can lean into. So we can bring in and we say from @redux-toolkit, which if you don't have Redux as a dependency, this will have everything that Redux has in it.

[00:03:33]
Like bind action creators, all those things are in this library as well. So it's your choice, but here we have configure store. Maybe if I write import I'll actually get, I'm now so top I autocomplete that if it doesn't autocomplete, I wonder what I've done wrong, which is good, right?

[00:03:54]
It's helping me on more than one way. So we've got that in place. And configure store, we can create a store. We call it, it's got a slightly different signature than create store which is in Redux normally, and it will take a reducer object, right? And so normally, you see your first Redux app ever it's like yeah, yeah just pass the reducer function to create store.

[00:04:22]
As like then you have to pull out combined reducers when it is more than one reducer and you put that all together and usually have a separate file, when you're exporting which reducers are you never using, so on and so forth. This just does a for you out of the box, right?

[00:04:36]
And so we'll start with that. I'm gonna make sure that I've exported everything that I need here. I've exported literally nothing. So we'll say export contest slice, I'm actually gonna make that my default export. And I'll show you one in a second. Export default. Test slice. There are other things on here that I need and want and a lot of times I will also then export them separately because it's just easier to do auto import and stuff like that.

[00:05:07]
And it's also clear what exactly I have. So if we look on task slice, see, you can see I've got those pieces in there. But I can also say let's do export const task slice, const, will call it actually tasks reducer. So these are the things that are on that test slice object, right?

[00:05:35]
The name you can guess what that one is It's the same property that I passed in. Reducer is the actual reducer that we created. Just as when we used create reducer earlier by itself. Guess what? It's a normal reducer. Nothing special about it. It's just made for you with everything ready to go.

[00:05:57]
The other thing that I will usually do is I will say, And then I will pull off just like in easier to import honestly. I'll say I'll pull off the different action names, so I'll say test slice dot actions. And on there as you can see when I use the destructuring object over here.

[00:06:18]
We've got add task, we've got remove task, and they are correctly typed, with everything ready to go. So the things that we did kind of piecemeal earlier. If you do want them together, this is a regular set of things that you can use, existing infrastructure, so on and so forth.

[00:06:38]
So I've got all of that, so now that I'm gonna save this file. We'll go into our store, and simply say, Now my task reducer is wired up to the store ready to rock and roll. Awesome, and let's just export default this. Why we kept this in a separate file because I have to play some import games in a second nd we'll see why and it will make life a lot easier for us.

[00:07:07]
But let's follow the thread for a second here. We're gonna keep the context API right now cuz I haven't totally swapped out both the users and the tasks that is providing. When those both gets swapped out you could definitely get rid of it but for now we'll just leave it in there.

[00:07:23]
But we'll also put our provider, we're still in the process of setting up. So we can pull all of this in. And so the provider is actually just the regular provider you would ever use from react Redux. And the store is now the store that we've just created.

[00:07:41]
So pull those both in and now I can simply wrap my application as I have done more times than I care to admit. Awesome. I hope that closing one every time. Cool. So we've got that all in there. That is wired up as we would kinda come to expect.

[00:08:10]
Now if it comes down to like adding the action to our form, we wanna create a new task or anything along those lines. We can see that in the task I have access to the actions in the store. Theoretically I've got React Redux, so I've got used dispatch, I've got used selector all the normal stuff in the hooks parlance of our times is ready to go.

[00:08:32]
I think at this point yes. React Redux right now still supports the map dispatch to props and map state to props that were for years and years and years were the facto way that you do everything. Especially with concurrent react and hooks and stuff that code exists, but the recommendation at this point is to use the hooks that come from React Redux as well.

[00:08:57]
So we'll kinda have those and we'll use those as well. And now we go up to create task. Okay, there's no like submitting of this form right now. So we can say, So useDispatch and that will give us our dispatch from our store that is provided by the provider.

[00:09:19]
And we can actually just use this like a normal action creator at this point. So we can go ahead and in our on submit, we can just say, Dispatch addTask, and that will have, you can see I automatically will get what are the details of the task. Now we're gonna have a slight problem here that maybe you already saw, but maybe not.

[00:09:43]
Where we'll say that the task, we really only have I guess the title at this point, right? So we'll say that the title is new test title.
>> Is this what would replace map dispatch to props?
>> Yeah. If you're using map to set straps that is still in React Redux, it is still supported.

[00:10:04]
There are questions as like a lot of this was rewritten for those hooks to support some of the new react 18 features. It's still totally usable. In fact, one of the nice things about that Higher-order component is that it will do some of the kind of, memorization of the props and not rear-ender the component.

[00:10:23]
It has some nice features to it as well. But yes, in modern versions of React Redux, you also have a used selector hook which we'll see momentarily, and you also have this use dispatch hook which will give you access to the store.dispatch wherever you need it.
>> What was the one you said replace the map state to props?

[00:10:41]
>> Use selector.
>> Selector, okay.
>> I will have to pull that one out momentarily. So you will see it. But first, all of my awesome, like I got all this typing for free. It is true that I have a small problem here that I have to solve for, which is, it's saying, hey you told me we're gonna put tasks on and I don't necessarily have all the information ready to go here for a task, and so I do need to provide some of the better types to my action.

[00:11:07]
Because all that free TypeScript support turns out is working, [LAUGH] right? And so that gives me some stuff that I need to do to solve for that.