Creating a Slice of State

[00:00:00]
>> So we're gonna go. If you go into the repose in the, on the course website, there's one, called chores Redux, which is a relatively, simple app. And what it seeks to do is maintain a list of humans, maintain a list of tasks and give you eventually the ability to assign tasks to a human.

[00:00:24]
So I can see who has to do what, around the house. So let's go ahead and we know that we're gonna need two slices of state. We're gonna need one for the humans and one for the tasks. And then we'll begin to use both of them to kind of build our application up.

[00:00:44]
So let's go into this code base. And we'll switch out to, I got to open this one up. That's the wrong one. I just. All right, give it one second we've got open in Visual Studio. So we've got our components. Our store right now is actually the normal one from react Redux.

[00:01:27]
So we wanna actually, instead of using Redux directly, we're gonna use Redux toolkit for most of what we need. So we'll get rid of this code and we're gonna export our conts store is configure store which is an abstraction that will eventually take some options and return a fully configured store things that are gonna happen in here.

[00:01:53]
It will automatically apply a few different middlewares for us. In development there are three middlewares there is one that checks if you're accidentally mutating state somewhere and yells at you about it. Another that makes sure we saw that you can export an import entire serialized version of state as JSON that works with our objects and arrays if you start using maps and sets stuff starts to get weird.

[00:02:15]
So it will go and check to make sure you're not doing that. And then it will give you a Redux stunk, which we briefly mentioned earlier, which allows you to dispatch functions, to make Ajax calls. It's gonna wire up all that middleware for you. It's gonna wire up the developer tools.

[00:02:28]
It's gonna do everything under the hood for you. Get you kind of set up. So it takes a reducer key. We'll just start out with our simple one for now, but we'll add to it momentarily, but we know that things get angry with us if we don't have it in place.

[00:02:45]
So now if we go over here, and just with that configure store We can see that we already have the dev tools in place. Great, so let's create the tasksSlice. So I'll go in this store. TaskSlice.js. And we need this createSlice ability. So we'll go ahead and we'll start with, we'll just say.

[00:03:24]
CreateSlice, and there's a bunch of other little helpers in here. Before we were just incrementing an ID. But Redux toolkit also comes with a little helper library called nano ID, which just create unique IDs for you. So we'll make a function. This is a regular JavaScript function for creating a task.

[00:03:45]
And really, the only thing that we're going to need eventually is a title for this task. And the ID is gonna use this library called nanoid. We'll get the title. We'll say, completed as false in the very beginning. This is very similar to what we did with the menu items.

[00:04:06]
And assigned to, will be an empty string for now. Great, so we've got that initial state. We'll just get some of that in place. And we'll say createTask. Do order more energy drinks again. And make another one, I don't know. What are the plants? Right, so this is again just calling this function.

[00:04:42]
We did it by hand in the previous ones. I've just given myself a little helper. And now we just need to make the slice. So we can say, export const tasksSlice is createSlice. And we know that the name is going to be tasks. We know the initial state, we have here.

[00:05:05]
And then we have our reducers. Right? These are all the things that can happen. Let's just start with the simplest thing which is we know we saw that form we know we're gonna need to add one. So we'll say add and just like before, it has the same API as any reducer itself will say state and action.

[00:05:22]
And then const task is that createTask helper that we made before. And whatever the action dot payload is. And then really we just push that onto the state. I could even get this down to a one liner if I really wanted to. And we've got that in place.

[00:05:50]
So now let's just hook it up to the, to the store, which we'll get rid of this one here. And let's go ahead and we'll just say. Do you remember the syntax for combined reducers where we have keys and then we have the value is a reducer? That's exactly the same syntax.

[00:06:06]
It's using everything we've seen so far under the hood to wire this all together for us. So we'll say tasks and that's gonna be tasksSlice.reducer. And great, so we have all of that in place. Let's go take a look in our developer tools and see if that's in our state now.

[00:06:28]
TasksSlice is not meant corresponding on disk, I don't know why, we capitalize that with the auto complete but here we are. Can I read probably map undefined Okay, we don't have the humans yet because I move that out of there. So actually say I should do the trick.