All right.
So now we're going to add the reducer function to add an item to the cart.
So let's go down to our cart slice and this reducers object.
And what we're going to do is add a new function called Add to Cart.
So we'll set that to an arrow function.
And I shut off GitHub copilot just because it was starting to get annoying.
Now that we're writing more code, it just gets a little confusing as to what I already wrote and what
it's recommending.
So in add to Cart, since this is a reducer function, it's going to take in two things a state and
an action.
So the state is just whatever the current state is of the cart.
And then an action will include any data inside of a payload.
So basically in this case, we're going to be sending an item to add to the cart which we can access
with action dot payload action dot payload.
So let's create a variable called item and set that to action dot payload.
So that'll be the item, including the fields or whatever.
Now we want to check to see if the item is already in the cart.
So we'll say let's say exist.
Item and we'll say state, and then we can access anything that's in the state.
Right now.
We just have an initial state of cart items, which is an empty array, but that's what we want to check
is cart items.
So we'll say cart items dot find.
So we want to find a specific item and that's the one that matches whatever the ID of this.
So in find we'll pass in a function, we'll say we'll use X here for whatever the current item is because
it's going to loop through, just like with any high order array method.
And we'll say if that current item, if the dot underscore ID is equal to the item from the action from
the payload ID, right?
So if those match, then that's going to put that particular item into this variable.
All right.
And we want to update the basically we'll just update the quantity.
So let's say if.
So if exist item.
Then we're going to take our state cart items.
And we're going to set that to state dot.
Cart items dot map because we're going to map through.
And I'll use X here again.
So we'll map through.
And then what we want to do is have a condition.
We'll say if x, if x dot underscore ID is equal to the exist item dot underscore id.
Then we'll return that item.
Else we'll just.
It'll just be whatever the item is that we're looping through.
Okay.
Else.
Then we just want to add the new item so we can say state dot cart items and we'll set that to an array
and then we'll just spread across what's already there.
So state dot cart items because remember, we're not going to use dot push, you know, state dot cart
items dot push because state the state is immutable.
So we're basically just making a copy of it by setting an array and putting everything in it and then
also adding.
The new item.
So now what we need to do is, is do some calculations for the price we want to store the items, price,
shipping, price, tax, price.
And when we add those together, that will give us the total price.
So let's go under the if statement here.
And let's say calc calculate item's price.
All right.
So we want to calculate the item's price.
We're also going to get the shipping price.
We're going to get the tax price.
And then all of those together will be the total price.
All right.
So let's start with the item's price.
So we're just going to take our state and we're going to add on to that an item's price value.
And we can get that by just taking all of the price values for each item in the cart and adding them
together.
And this is a good case for the reduce method, which is a high order array method, and we can use
that to to add all the prices together.
So let's take the cart items.
So state dot cart items and let's say dot reduce.
Let's just close that up for now.
So we're going to reduce and that takes in a function.
And the what we're going to pass in here is the accumulator and then the item itself.
Okay.
And that accumulator, we're going to set that to to zero.
And basically it'll start from there and then we can add the prices together.
So let's take the accumulator, add on the item dot price, and then we also need to take into account
the quantity, right?
Because if you have two or more of an item, then you need to add that to the price.
So we're going to say times item dot Qty.
Okay.
And then the next argument we pass in is the default for the accumulator, which is going to be zero.
So this starts at zero.
It'll loop through, it'll add the item price multiply by the quantity and we should end up with the
total item price.
Now we have some stuff to add on to that shipping and tax.
So, but before we do that, I want to make sure that we have the right amount of decimals and it's
formatted correctly.
So I'm actually going to create a helper function up here called Add decimals.
Okay.
And then that's going to take in a number.
And what?
I want this to return.
Is going to be.
Let's use the math object here.
We're going to round.
Say math.round.
The num.
Times 100 and then just divide that by 100.
Actually, let's put.
This in parentheses, this whole thing.
Like that.
And then we want two decimal places.
So I'm going to say two fixed.
And pass in two.
So I just want to use this helper function for all of our pricing.
So let's wrap this right here.
Where we have our let's see state item price.
Yeah, we're going to set that to add.
Decimals.
And we're just going to wrap this entire thing.
All right.
So now for the shipping price.
Let's do that.
So we're going to say state dot.
Shipping price.
And what I'm going to do for shipping.
I'll put it up here actually.
So shipping will be, let's say, if.
If order is over $100, then free.
Else it'll be $10 shipping.
Okay.
And you can have any shipping policy you want.
That's just what we're going to do.
All right.
So we're going to use Add decimals here as well.
And then let's pass in here.
We'll take our state dot items, price that we just calculated above and we'll say if that is greater
than 100, then it'll be zero.
Else it'll be ten.
Okay.
So shipping price, it's always going to be either 0 or 10 based on the amount of the order.
Now for the tax price, it's going to be 15%.
So let's just say 15% tax.
So state and then tax price.
And we want to use add decimals here as well.
And let's just make sure that this is a number.
So we're going to wrap it in number and then in parentheses we'll say 0.15.
And we want to multiply that by the item's price.
So state dot item's price.
So that will give us 15% of that.
And then let's just add on to this to fixed.
With two decibels.
All right.
Now for the total price, basically, we just need to to add all that stuff together.
So let's say state dot and then total.
Price, and we're going to set that.
Let's wrap this in parentheses and we'll say number.
Just make sure everything is formatted as a number so the state dot items.
Items.
Price And then we want to add.
See number.
State dot.
Shipping price.
State dot.
And then let's see.
Tax price.
And I think that should do it.
And then we'll just add to fixed.
To now all of this that we have this state items price shipping, price tax, total price.
I want this all saved in local storage.
So we're going to go right under the line that we just finished and we're going to save to local storage.
So let's say local storage dot set item, save it as cart and we're going to save the entire state.
We just need to run it through Json.stringify.
And then state.
Okay.
Now, in order to use this add to cart, which we're going to be using from our component, we need
to export it as an action.
So even though we already exported the reducer to put that in the store JS file, any function we create
here we need to export as an action.
So let's say.
Export, const.
And then.
Add to cart.
And that's going to be from cart slice.
So cart slice dot actions.
And then we should be able to bring that in and we should be able to use it, which is what we're going
to do in the next video is hook this button up so that we can actually add these items to the cart.