OK, with all our functionality in place, let's also set up a action that will count the items in the
cart as well as the total amount of money.
And if we check out the actions in the beginning, I have to I had get total and get them out.
But in fact, I changed my mind and we're just going to go with one.
So I'm sorry, but we're going to have to write this a little bit where the action and the variable
will be get totals like so so for both the amount and the money, the actual dollar amount.
And as far as get them out, we will rewrite that because there's going to be another action and the
action name will be doggle.
Toggle amont and you'll see why we're doing that, essentially, it is because we will refactor our
producer, but since there's quite a bit of repetition in the decreased one, remember we had a decreased
action and I'm here and essentially we're copying pasting a lot of stuff.
So I would want to refactor that.
But first, we will start with our get dawdles.
Now we need to set up a code container where we import our get tomorrow's action and you'll see in a
second why.
So we're going to go get Donal's and now let's think about it.
So when we would want to dispatch get totals and I think an awesome time would be each and every time
something will be updated in our cart container, because every time we'll update something in our cart,
for example, remove the item or increase the amount, we could just recalculate our totals.
And what's really cool that in react, we have our hooks and the hook that I would want to use is the
use effect.
Now, of course, we can import that used a fact hook directly or I can just type it react that use
effect.
And since I find it faster to skip importing, I'm going to write, react, use fact.
Now, as far as the use effect hook, we need to passing the callback function that will run each and
every time the component will render.
Now we could set up here an array that would be a dependency array, but since we're just calculating
the totals, there's really no need for it.
And in my callback function, I would want to dispatch get totals.
So I still have the access, of course, because remember, we had maps, theta props and I have my
dispatch prob so I can just pass it here in this dispatch and then remember again, we need it to pass
in our object then type we'll be get totals, let's say that and then in reducer.
First let's set up some kind of console log just so we can see that for sure our functionality works.
And then somewhere in the bottom I guess right after the remove, I'm going to set up my IF and then
action type and set it equal to get totals.
Now, let's check it out if our console log works.
So I'm going to say totals.
And once we separate each and every time, we would want to do something with our items while we should
see the console logs.
Now, again, why is that happening?
Because we have the cart container and then each and every time something changes in the props, then,
of course we render.
So since we on use the fact after each render, that's why each and every time we will dispatch our
gutturals and essentially we will calculate our totals.
As far as the functionality, of course, is going to be a bit more complicated than a console logging
the totals.
And we will start by setting up a reduced function.
So I'm going to go with two variables.
So I'm going to do the structuring like this and you'll see in a second why we're doing that.
So I will create two variables from the object that I'm going to receive, and maybe more precisely
as I will, the structure, the variables out of the object that will be returned from my reduced function.
So now I'm going to use state court and that is my area.
Then we're using the reduced function and then in the reduced function again, we pass in the callback
function.
Now, what's different about reduce is the fact that we can return anything, what we would want from
mergers.
And in our case, we will return an object with two properties with total on line for initial value,
will set it equal to zero and then amount, which also will be zero.
So that's why I'm right away structuring these two things out of there.
And then once I say I get a big fat error because the method name is not a reducer, it is reduce.
And I also want to set up my parameters in the callback function.
So similarly, we have with filter and knob, there's a callback function will run against each and
every item in the array.
Now the difference is that we have two parameters right now.
We're going to have our total.
And since these are parameters, of course, we can call it whatever we want.
So I'm going to go with Cataldo and then we will have a current item and I'll represent the one with
cart item.
So two parameters.
And then always, always, when we work with reduce, we must return our total.
So that's the way how the functionality works.
So let me set this up.
So return.
And we're going to go with total, let's say it, and since we don't have the error now, we can start
actually working on the functionality and the way it works.
Each and every item will be represented with this item.
And what I would want to do.
Well, first, I would want to set up my amount.
How can I count that?
Well, since each and every item is the object with all the properties and all that, I'm going to start
by the structuring.
And as always, if you would want to check it out, what you will have as far as the item, I'll just
cancel it.
It's going to be the best way.
And once you do, you'll notice again you'll have access to each and every item.
So what I'm looking for is this amount.
So how many items are in the cart?
And I also want to get the price because that will help me to calculate my total.
But I'm going to go with the structure and in this case, so I'm going to look for price and then the
amount and that is coming from my cart item.
So once I have these two things, I would want to calculate my amounts and the way I can do that, since
I know that I'm returning the object.
Now, the car total also, of course, represents that object.
And for the amount I can simply say this way, I would say cataldo my object, then look for the property
amount and then each and every iteration just add whatever amount you're getting from that particular
item.
So there are six items in the cart, for example, then they will be added to my car total and then
at the end return here.
Now I also need to return my new state.
So return the other not state, not guitar.
Sorry, so state.
I'm copying all the properties from the state and then to that I would want to change will be total
as well as the amount.
Now let's see, we'll run it and notice how I'm getting three items.
So why am I getting the three items.
Because again, we use the reduced method.
I loop Overmeyer, my Qaderi and then I just count how many items I have and then I return in my object
the amount property with initial value of zero.
But then of course since I had the structure out my amount and then override it in the state, in the
old state and return it as new state.
That's why I'm getting these values of three.
So if I'm going to keep on increasing notice how my amount will also change.
And similarly, we can work with the total.
The only difference will be that we need to multiply price with the amount because think about it.
So we have the total for total.
Not only I need to know how many items are in the car, what would be the individual cost for each and
every item.
Right.
So then for example, or multiply five by five hundred or one by someone.
So in this case, I'm going to set up a separate variable product.
So I'm going to go with const item total.
So calculate each and every total for the item.
And I want a simple we just go with price, then we multiply this by amount like so and then the same.
How we work with a mount property in the total will do with eight or so.
Let me move maybe amount down and we're going to go with cart total then property I'm looking for is
total and it is equal to my item total.
Now I'm sorry, we need to add it in each iteration and then of course now we have the correct totals.
Now one thing with the total though, because we're going to be adding decimals, we might run into
the following problem.
So before we set up our state, I also would want to change my value of it and instead create a total
would let.
Of course, I can override it here in the bottom and I'm going to use two fixed first.
So we're going to go with total to fixed.
That's just going to make sure that we only have two decimals.
And then since it's going to return a string, we're going to go with pass and float and then we're
just going to wrap our total.
So that way we're not going to have these crazy numbers at the max will have just two decimals after
the.