All right, and I think we can the last piece of functionality to our cart, and that is counting the
totals and again will set up a use effect.
So every time the state value will change course, we will invoke that function.
More precisely, we will dispatch an auction to count totals.
And we already have the use of a correct, because if we take a look at the card context, we were setting
up our card every time the card changed in local storage.
So we just need to piggyback this dispatch here as well.
Now, before I set this up, I also want to add the amount so the state value to my card buttons, because
if you remember the moment, we have only the functionality to toggle the sidebar and we're actually
hard coding this value.
But even though at the moment it is zero, I know that there is really no functionality or of course,
this value will change.
So we might as well just grab it over here.
And the name is total and then underscore items not as equal to my use card contacts.
We just need to invoke it.
And if everything is correct the moment, it should be zero.
So say here, total underscore and items and I can see it on the big screen and on the small screen.
I just need to open up the sidebar.
Allerdyce.
Now of course I have to zero then like I said.
In the current context, I would want to piggyback here in the U.S. fact where I have my local storage
and before or after doesn't really matter.
I'm just going to set up my dispatch and I'll dispatch an auction by the name of Count Car Total.
So every time I change something in the cart, it's going to be displayed in multiple places again.
The type was count part two, whatever I want one.
Yes, there's going to be a big fat error because of course, we invoke it right away when the component
mounts and we're not handling that in the producer.
So now, of course, we just need to go back to the cart producer and handle that action as well.
So in the cartridges or keep on scrolling right here, we're going to go with F and then action not
type is equal to count cart totals.
Then of course I would want to reduce over my car and the way we'll do that again, similarly, like
we did in that previous years, reduce a project which is going to iterate over.
All right.
In this case, we will do that using a reduced.
And then we'll just count for every item, what is the price and what is the amount of items we have
in the cart?
So let's go here with comments.
I know that I'm going to be returning a object from my readers.
So right away, the structure it so say here state and then court and reduce.
Now in the reduce we pass in the competition and in the combat function, we have two programs.
We have total or you can name whatever you like my name and the store that represents whatever we are
returning from lenders.
And also we have them.
As a side note, I do have JavaScript Nuggets video on this.
So if you're lost at some point, just go to the JavaScript Nugget series and I explain that in greater
detail over there.
As far as the return, I would want to return a object.
And in that object there's going to be two properties.
Not all named them exactly like I have in context, because I don't want to keep on using both of them
since I can just use my S6 thing where if the name is exactly the same, then I can just keep on using
the same name.
So say total, and then items by default is going to be zero.
Don't worry, functionality is coming up and the same goes for total, total and underscore amount,
which also by default will be zero.
So once I know that I'm returning object with these two hours, I can.
The structure here is well, correct.
I can say total and underscore items and then total underscore among mean.
Even though we haven't set up the functionality yet.
I know that I'll return my state that not and then state and then I would want to change to the total
items and total amount.
And since names match exactly to whatever I have already, I just simply can write a total total on
the score items and then total underscore mount like.
So now we just need to set up the functionality.
Now one Gotcher with the producer, we always, always, always, always need to return our total.
So let's start with that one, because it's easy to make that mistake.
And then of course our functionality will break.
And please keep in mind that in each direction I'm accessing the card item.
Now, what kind of properties I have in the card item, I have the amount and the price.
Correct.
So I can adjust the structure that and say price and amount is coming from my car item.
And then as far as the items, the total items in the cart, what do I need to do?
Well, I have the object.
Object has a value of no.
So in each iteration, I just want to grab the amount value and added to that total items.
So we simply say with total, that's my object property name is total items and plus equals.
Since I wouldn't want to override that value, I would just want to add to that value.
I just add my amount and then when it comes to the total amount, so that is going to be the price multiplied
by amount.
Again, the same exact setup where we go with total and the total amount.
So that's going to be the total money amount.
And in this case, Housei plus equals.
And I just need to multiply price by the amount since of course, in order to get my total, I need
to know how many items of this particular product I have multiplied by the product price and that will
be added to my total amount and once we save, since we already are setting up everything in local storage
as well.
That's why I'm getting my items and I can make my calculation where I have right away for and try.
And, you know, in this case, it's going to be easier if we go to the big screen, check it out.
So this is going to be the subtotal for those items, of course, and I can have the total subtotal
as well.
And then I just had a shipping fee and this is going to be my card total.
And as I'm changing my values, notice every time we are invoking, of course, the use of it.
And that's why we can count our totals.
I notice here in the cart, I also can see that how many items I have that should do it for the card.
And I think now I can start working on the user.