Creating a Slice

[00:00:00]
>> This is good. Now we have access to reducts inside of our applications. Let's go ahead and delete adopted pet context coz we're not gonna use that anymore. So you can just delete that from your app and make a file called adoptedPetSlice.js. What is a slice? A slice is kind of a new idea for Redux Toolkit, but basically it's the idea of, I'm putting all the reducers, and action creators and all that stuff together in one particular bundle, right?

[00:00:39]
That the term that they use to describe that bundle of putting everything together is a slice. So import, create slice from at Redux toolkit. And then we're going to export const adoptedPetSlice = createSlice, so first of all you have to give it a name. What is the name of the slice this name is the adoptedPet, okay.

[00:01:21]
The initial state, we have to give us some sort of initial state of like what we want this particular item in our little database to be when you first create it. So we're going to give it a value of null, I don't want it to be set to anything right because no pet has been adopted until they click the AdoptPet button.

[00:01:41]
And then we're gonna give it a bunch of reducers. You can give it a bunch of reducers, I'm gonna give it just one reducer. This is going to be the adopt reducer. So what is a reducer? A reducer is just a fancy term for, it's a function that takes an old state and something that you wanna change about the old state.

[00:02:04]
We'll call that an action. And all it does is it takes an old state. It performs some action to it and returns new state. So in this case, I'm gonna say state.value is assigned action.payload. So whenever someone adopts something, we're just saying, this is now the adoptedPet, right?

[00:02:29]
We're not doing any math. We're not doing anything like that. We're just saying that this is the new state, right? But I mean, I don't know let's say it was important that the name be to uppercase, right? You could do all that stuff here. This is your opportunity to change the state.

[00:02:52]
Does that make sense? This is kind of a weird API, I mean, it's very succinct, right? But if you come from a functional programming background, it feels really weird to operate on your parameters. It's okay, I promise it's okay to do it this way. Yeah, that's what you're supposed to do.

[00:03:15]
Okay, export const (adopt) equals adoptedPetSlice.actions and export default adoptedPetSlice.reducer. So I'm just kind of taking this pattern from their documentation. Whenever you create a reducer, it automatically creates an action for you, so this is a little bit of black magic cure for redox toolkit. I created this reducer, under the hood it then goes and creates an action for me.

[00:04:02]
So now I have this ability to create actions that I can send it to this reducer. So later if I click, adoptLuna, I can use this function to send that into the reducer, and it just kind of all the parts automatically fit together for you. It's a little indirect, but it also was very annoying to have to write this code.

[00:04:28]
I mean basically all this function does is, function pet return, action or payload pet. I think this is basically all this function does, is it just wraps it into an action object for you. It also, it will give it like a type of like adopt, something like that.

[00:05:01]
That's all an action creator does is it takes in some sort of bit of information and it wraps it into like a formal object that you can then give to reducers. So, this little black magic key, but at the at the end of the day, this is all it's doing.

[00:05:17]
So it's just nice to not have to repeat yourself so many times. Again, if you go watch version four of this course I make you do all this by hand, and it's very annoying to do it. Okay, so there you go, that is a slice. That's everything, that there is a slice.

[00:05:33]
Like, we're not going to do it now, but you can imagine that there would be like an adoptReducer, where it takes in a state and action. And all this would do is like state.value equals null, right? And then you would have an unadopted function. And you could like click like an X on our interface node and adopt a pet right?

[00:05:56]
So anything that you would do to modify the adoptedPet would go into this reducers array. Okay, that make sense? Okay, so for now, we're just gonna have one, but you can imagine you could have anything that happens to affect that would happen here. Okay. So go back to store.js, and here we're just gonna add dot Reducer.

[00:06:26]
So import adoptedPet, slice from adoptedPet. I'm gonna call this just adopt, adoptedPet. And we'll put adoptPet there. And there we go. You have to give this to the store or it doesn't know anything about it, right, so we're providing the reducer to the adoptedPet slice to the store.