I'm the same way how we set up our move.
I'm gonna do it with all my functions and if at the moment you're still iffy of how everything works
lets out all the functions.
So our functionality works and then I'm gonna repeat one more time everything that I said about reducer
why we're doing something and when are we doing that.
And we started with dispatch OK.
That was awesome.
And then in this case I can just delete whatever functionality I have there.
Since now everything should work within our remove.
We're going to save it.
And up next we have increase among online for increased amount.
It's gonna be exactly the same in the cart.
We're gonna go with dispatch function and type is gonna be a bit different.
So we're gonna go with TYPE AND WE'RE GONNA BE LOOKING FOR increase increase.
And then again we're gonna use our payload property to pass in the 80.
We're gonna save it.
And then within reducer we also need to check for the type of increase.
Correct.
Because for now we're just checking for.
And I'm gonna copy and paste the line I guess I'm going to copy paste.
Case is gonna be increase and you know what since I'm gonna be adding a rest of them I'm gonna copy
and paste them right now as well.
Some will go for increase and then we're gonna have to decrease one and then we're gonna have add to
cart clear cart.
So let's have increase let's have decrease decrease.
So then we also have add to cart add to cart.
And lastly we have clear cart.
This is the functionality we're gonna have.
And for each and every one of them we're gonna set up some kind of functionality.
And the most important thing you need to remember that we need to return a new state.
So essentially when we use the filter method and that's what we're doing we're turning a new right.
We're not mutating the older right that we passed in here.
And then if we head back to cart we can see that for the increase.
This was our functionality where essentially we used a map method we looped over our state and then
we check if the item I.D. matched.
Then we just added the item and the way it's going to work is I'm gonna do the same thing but we're
just gonna change around a bit where of course we're looking for the payload so I'm copying everything
here starting from the square brackets all the way to set car I'm not going to use that card again we're
not using that functionality and in this case I'm just gonna cut this out we're gonna head to reducer
and then we're gonna return state then copy and paste of course we don't need the card anymore because
we're gonna be mapping over state map returns a new array.
So we're good to go because we always need to return a new of course state and then instead of I.D.
matching the item I.D. We're checking for the payload.
Why.
Because we're passing in as a payload property it is action action of that payload.
We're going to save that and everything works as expected.
And next up we have decreased amount.
Now I'm going to delete the previous two.
OK so just so we don't have the mess up here.
We're going to save that and for decrease it's going to be almost the same in reducer.
But the difference is gonna be within the actual function because we still need to check our amount
and the way it's gonna work is we're going to say if a mount is equal to one then we're gonna dispatch
one action.
Otherwise we're going to dispatch a different one.
So in this case we're not going to remove the item.
We're going to say dispatch and I guess in this case I can just can't comment this and then we're going
to have if amount is equal to one then we're gonna dispatch remove dispatch then we're passing the object
and then remember we needed to have a type property value needs to be removed.
Then we have a karma payload and payload is equal to an I.D..
And of course where we're getting this.
Well we're getting still when we click on the actual decrease correct we're getting the amount.
We're checking the amount.
If the amount is equal to 1 then I would wanted this patch removed.
Now we've however amount is bigger than one.
Then of course we would want to decrease the income.
So we're gonna say here else and we're going to dispatch a different action and we say this patch and
we're going to look for type and then the type is going to be decrease Mark.
So we need to also passing the payload with an IED.
Of course Heidi we're getting here as a parameter.
Now what I'm going to do is cut out again what I have for new card I'm going to leave the set card.
This is going to be my function.
But now we need to deal with two things within our reducer and the good news is that already within
a reducer I'm handling the remove.
So I only need to worry about the decrease.
So we're gonna head to reducer and the same how we work with the increase.
Remember where we used a return state map and then we'll look for that item.
We're going to do the same thing here.
So I'm just going to copy and paste this for decrease.
And then again we're looking for the payload because that's what we passed in by the way I misspelled
here.
Action that payload.
Sorry about that.
A load.
And then we would want to decrease the item instead.
So instead of Plus One we're going to go with minus one.
Then I'm going to quickly gonna do Clear card because that's going to be simple one where we just go
with the return and we would want to return.
And you're right.
That's all we have to do because add to cart is gonna be bit longer then also let's fix our function.
So instead of add the cart we're going to go with clear cart and remember we need to dispatch an action
that would match whatever I have here.
So what is the name.
Well that is a clear card.
So we're gonna go with dispatch then we need to pass in the object type and then we're looking for clear
cart and there's the reason why I'm typing everything altogether.
I'm going to show you as we're setting up the variable a bit more straightforward method.
But in this case we're just going to go dispatch clear cart and within the reducer Of course we're handling
that where we have clear cart and we're just returning the array and the last one is of course our add
to cart and the way I'm going to set up my functionality I'm going to go with new item then it's going
to look for the cart.
So whatever cart I have in the state right now then I'm going to look for find someone to use find method
and I would want to get the item that matches the idea that I have in the product.
So if the item I d matches the product of that of course is going to be my item.
So if the item is there if we go with each item if the item is there then I would want to dispatch one
action.
And then if the item is not there then we're going to dispatch another action if the item is there then
we're going to dispatch increase.
So let's cut and paste we're going to dispatch increase if the item is not there then we're going to
dispatch Add to Cart we're going to go add to cart or in this case we need to remember that payload
is not just gonna be ADHD because the idea we're passing in the increase amount in this case we need
to look for product data.
Some say if the item is there then just use payload and use product idea within a payload that is going
to be my day if I would want to add to cart that I'm just gonna passing the whole product.
So notice how the functionality is exactly the same.
I'm passing in the payload and the value is the idea that I'm passing within the increased amount.
However when I'm adding to the cart I'm still passing in the 80.
So my functionality within the reducer is still going to work where I'm still gonna get my I.D. in the
payload however it's coming from different place now it's coming from the product.
Since when we used add to cart we of course passed in the product and now we just need to make sure
that we handle.
Add to Cart.
So we're gonna head back to our reducer and then we're going to look for our Add to Cart and now.
Well now I want to get the properties out of my payload because remember payload was my product so cost.
And then we look for I.D. image title.
Price is equal to action payload and then.
Now let's set up a new product let's go and let new product that one is going to be equal to an object
like so and then within the object we're gonna use the S6 where we can just access the properties so
I.D. image title price and it's going to be amount that is gonna be equal to 1 Same like we had before
and then since we need to return a new state we're going to go with the return.
Then we're going to use a spread operator where we copy our old state and we just add a new product
we save that.
And now if we're going to try to set up to cart everything should work.
So we have the products I can check it out the product and then if I go add to cart of course the item
has been added to the cart.
I can increase the amount I can decrease amount and let's try with another one just so we can see for
sure.
Add to Cart for our move then of course the item has been removed to cart.
And then lastly if I check out my local storage as should still see the.
So application then we look for local hosts and of course I have my cart.