So now we're going to start to implement the shopping cart.
And since we're using Redux toolkit, we'll create a new slice for the cart and that will hold any state
that has to do with the shopping cart.
So let's go into let's see, we're going to go into slices and let's create a new file here.
We're going to call it cart slice dot JS.
And the first thing we're going to do is import, create, slice.
So in the other slice we use create API, right?
Right here in products because this is a is a slice where we have endpoints that that are dealing with
asynchronous requests, right?
So we're not doing that with the cart.
So we don't need to use create API, we can simply use the create slice function.
All right.
And then let's add that down here.
We'll say const cart slice.
And we're going to set that to create slice and create.
Slice takes in an object.
And we're going to give it a name, call it Cart, and then it's going to have some initial state and
I'm going to actually put that in a variable above.
So we'll do that in a second.
And then it also has excuse me, it has a reducers object.
Okay.
And this reducers object will have any functions that have to do with the cart.
So when we add to cart, remove, etcetera.
So for the initial state, let's come up here and let's say const initial state and our items are going
to be stored in local storage so that when we leave the site, we come back, our items are still in
the cart.
So we want to check that local storage item first of all.
So let's say localstorage.getitem cart because that's what we're going to store it as you could call
this anything, but I think Cart makes sense.
So we'll check that.
And if there is something there, what we're going to do is then parse whatever is in there because
it gets stored as a string.
Local local storage can only hold strings, but it will be in the format of, you know, of an object.
So we're going to parse it as a JavaScript object else then we want initial state to just be an object
that has cart items.
Which will be just an empty array.
Okay.
And we'll have other stuff in here too, like the shipping address and the payment method, stuff like
that.
That's going to be in the cart state as well.
Now we want to export any, any anything we create in reducers such as add to cart, remove from cart.
What else we're going to have save shipping address.
We'll need to export those as actions, but we also want to export the reducers altogether and bring
it into our store file.
So we'll say export default cart, slice dot reducer.
So let's save that.
And now let's go into our store dot JS file and we're going to do this.
We're going to say import.
Uh, cart.
Slice.
Reducer.
And that's going to be let's see, it's going to be from and we want to go dot slash slices.
Slash card slice.
Okay, Because we're able to do this because of this, because we export that.
We import it here and then we add it to our store.
Basically our global reducer.
So let's call this cart, set it to cart, slice reducer, and we should be good.
We should, we should be.
Let's see, import it as slice reducer.
That's because this is actually default.
So we don't need curly braces.
And there we go.
So now if I open up my redux dev tools, we should see the cart state.
So if we go to, let's see, Redux.
And let's pull this up a little bit.
Yep, there it is.
So our cart state right now is just an object that has this cart items array, which of course is empty
because there's nothing in the cart.
So what we'll do in the next video is we'll create an add to cart reducer in here and we'll be able
to basically fire off an action from the page from here and we'll be able to add it to the cart.