1
00:00:00,180 --> 00:00:08,010
OK, with all our functionality in place, let's also set up a action that will count the items in the

2
00:00:08,010 --> 00:00:11,340
cart as well as the total amount of money.

3
00:00:11,760 --> 00:00:18,110
And if we check out the actions in the beginning, I have to I had get total and get them out.

4
00:00:18,510 --> 00:00:21,200
But in fact, I changed my mind and we're just going to go with one.

5
00:00:21,600 --> 00:00:27,060
So I'm sorry, but we're going to have to write this a little bit where the action and the variable

6
00:00:27,060 --> 00:00:34,470
will be get totals like so so for both the amount and the money, the actual dollar amount.

7
00:00:34,830 --> 00:00:42,420
And as far as get them out, we will rewrite that because there's going to be another action and the

8
00:00:42,420 --> 00:00:44,550
action name will be doggle.

9
00:00:45,490 --> 00:00:53,200
Toggle amont and you'll see why we're doing that, essentially, it is because we will refactor our

10
00:00:53,200 --> 00:00:59,830
producer, but since there's quite a bit of repetition in the decreased one, remember we had a decreased

11
00:00:59,830 --> 00:01:03,550
action and I'm here and essentially we're copying pasting a lot of stuff.

12
00:01:03,560 --> 00:01:05,500
So I would want to refactor that.

13
00:01:05,810 --> 00:01:09,550
But first, we will start with our get dawdles.

14
00:01:09,920 --> 00:01:17,020
Now we need to set up a code container where we import our get tomorrow's action and you'll see in a

15
00:01:17,020 --> 00:01:17,670
second why.

16
00:01:18,040 --> 00:01:21,660
So we're going to go get Donal's and now let's think about it.

17
00:01:22,090 --> 00:01:28,540
So when we would want to dispatch get totals and I think an awesome time would be each and every time

18
00:01:28,750 --> 00:01:35,860
something will be updated in our cart container, because every time we'll update something in our cart,

19
00:01:35,860 --> 00:01:41,680
for example, remove the item or increase the amount, we could just recalculate our totals.

20
00:01:42,010 --> 00:01:48,340
And what's really cool that in react, we have our hooks and the hook that I would want to use is the

21
00:01:48,340 --> 00:01:49,050
use effect.

22
00:01:49,390 --> 00:01:55,520
Now, of course, we can import that used a fact hook directly or I can just type it react that use

23
00:01:55,600 --> 00:01:55,930
effect.

24
00:01:56,200 --> 00:02:02,250
And since I find it faster to skip importing, I'm going to write, react, use fact.

25
00:02:02,530 --> 00:02:08,710
Now, as far as the use effect hook, we need to passing the callback function that will run each and

26
00:02:08,710 --> 00:02:11,720
every time the component will render.

27
00:02:12,130 --> 00:02:18,130
Now we could set up here an array that would be a dependency array, but since we're just calculating

28
00:02:18,130 --> 00:02:20,250
the totals, there's really no need for it.

29
00:02:20,650 --> 00:02:24,880
And in my callback function, I would want to dispatch get totals.

30
00:02:25,270 --> 00:02:31,240
So I still have the access, of course, because remember, we had maps, theta props and I have my

31
00:02:31,240 --> 00:02:36,970
dispatch prob so I can just pass it here in this dispatch and then remember again, we need it to pass

32
00:02:36,970 --> 00:02:44,560
in our object then type we'll be get totals, let's say that and then in reducer.

33
00:02:44,920 --> 00:02:50,830
First let's set up some kind of console log just so we can see that for sure our functionality works.

34
00:02:51,020 --> 00:02:58,150
And then somewhere in the bottom I guess right after the remove, I'm going to set up my IF and then

35
00:02:58,160 --> 00:03:02,950
action type and set it equal to get totals.

36
00:03:03,250 --> 00:03:06,130
Now, let's check it out if our console log works.

37
00:03:06,460 --> 00:03:08,440
So I'm going to say totals.

38
00:03:08,680 --> 00:03:14,800
And once we separate each and every time, we would want to do something with our items while we should

39
00:03:14,800 --> 00:03:16,130
see the console logs.

40
00:03:16,450 --> 00:03:17,850
Now, again, why is that happening?

41
00:03:17,860 --> 00:03:24,700
Because we have the cart container and then each and every time something changes in the props, then,

42
00:03:24,700 --> 00:03:25,820
of course we render.

43
00:03:26,230 --> 00:03:32,790
So since we on use the fact after each render, that's why each and every time we will dispatch our

44
00:03:32,820 --> 00:03:36,550
gutturals and essentially we will calculate our totals.

45
00:03:36,850 --> 00:03:41,890
As far as the functionality, of course, is going to be a bit more complicated than a console logging

46
00:03:41,890 --> 00:03:42,700
the totals.

47
00:03:42,700 --> 00:03:46,980
And we will start by setting up a reduced function.

48
00:03:47,350 --> 00:03:49,180
So I'm going to go with two variables.

49
00:03:49,180 --> 00:03:53,920
So I'm going to do the structuring like this and you'll see in a second why we're doing that.

50
00:03:54,250 --> 00:04:00,310
So I will create two variables from the object that I'm going to receive, and maybe more precisely

51
00:04:00,310 --> 00:04:07,870
as I will, the structure, the variables out of the object that will be returned from my reduced function.

52
00:04:08,180 --> 00:04:11,650
So now I'm going to use state court and that is my area.

53
00:04:11,950 --> 00:04:17,530
Then we're using the reduced function and then in the reduced function again, we pass in the callback

54
00:04:17,530 --> 00:04:17,860
function.

55
00:04:18,310 --> 00:04:23,640
Now, what's different about reduce is the fact that we can return anything, what we would want from

56
00:04:23,640 --> 00:04:24,130
mergers.

57
00:04:24,400 --> 00:04:32,380
And in our case, we will return an object with two properties with total on line for initial value,

58
00:04:32,380 --> 00:04:36,780
will set it equal to zero and then amount, which also will be zero.

59
00:04:37,000 --> 00:04:41,230
So that's why I'm right away structuring these two things out of there.

60
00:04:41,440 --> 00:04:49,390
And then once I say I get a big fat error because the method name is not a reducer, it is reduce.

61
00:04:49,690 --> 00:04:53,530
And I also want to set up my parameters in the callback function.

62
00:04:53,860 --> 00:05:00,880
So similarly, we have with filter and knob, there's a callback function will run against each and

63
00:05:00,880 --> 00:05:03,010
every item in the array.

64
00:05:03,250 --> 00:05:06,220
Now the difference is that we have two parameters right now.

65
00:05:06,580 --> 00:05:08,230
We're going to have our total.

66
00:05:08,430 --> 00:05:11,880
And since these are parameters, of course, we can call it whatever we want.

67
00:05:12,130 --> 00:05:18,400
So I'm going to go with Cataldo and then we will have a current item and I'll represent the one with

68
00:05:18,410 --> 00:05:19,730
cart item.

69
00:05:19,930 --> 00:05:21,130
So two parameters.

70
00:05:21,370 --> 00:05:26,320
And then always, always, when we work with reduce, we must return our total.

71
00:05:26,620 --> 00:05:28,600
So that's the way how the functionality works.

72
00:05:28,900 --> 00:05:29,980
So let me set this up.

73
00:05:29,980 --> 00:05:30,790
So return.

74
00:05:33,400 --> 00:05:39,520
And we're going to go with total, let's say it, and since we don't have the error now, we can start

75
00:05:39,520 --> 00:05:42,820
actually working on the functionality and the way it works.

76
00:05:42,820 --> 00:05:47,140
Each and every item will be represented with this item.

77
00:05:47,470 --> 00:05:48,740
And what I would want to do.

78
00:05:48,760 --> 00:05:51,510
Well, first, I would want to set up my amount.

79
00:05:51,730 --> 00:05:52,810
How can I count that?

80
00:05:53,050 --> 00:05:58,480
Well, since each and every item is the object with all the properties and all that, I'm going to start

81
00:05:58,480 --> 00:05:59,380
by the structuring.

82
00:05:59,620 --> 00:06:04,750
And as always, if you would want to check it out, what you will have as far as the item, I'll just

83
00:06:04,750 --> 00:06:05,510
cancel it.

84
00:06:05,740 --> 00:06:06,690
It's going to be the best way.

85
00:06:06,940 --> 00:06:11,380
And once you do, you'll notice again you'll have access to each and every item.

86
00:06:11,620 --> 00:06:13,960
So what I'm looking for is this amount.

87
00:06:14,270 --> 00:06:16,540
So how many items are in the cart?

88
00:06:16,810 --> 00:06:21,400
And I also want to get the price because that will help me to calculate my total.

89
00:06:21,820 --> 00:06:27,430
But I'm going to go with the structure and in this case, so I'm going to look for price and then the

90
00:06:27,430 --> 00:06:30,510
amount and that is coming from my cart item.

91
00:06:30,820 --> 00:06:37,030
So once I have these two things, I would want to calculate my amounts and the way I can do that, since

92
00:06:37,030 --> 00:06:38,790
I know that I'm returning the object.

93
00:06:39,130 --> 00:06:42,520
Now, the car total also, of course, represents that object.

94
00:06:42,790 --> 00:06:48,940
And for the amount I can simply say this way, I would say cataldo my object, then look for the property

95
00:06:48,940 --> 00:06:55,840
amount and then each and every iteration just add whatever amount you're getting from that particular

96
00:06:55,870 --> 00:06:56,290
item.

97
00:06:56,590 --> 00:07:02,230
So there are six items in the cart, for example, then they will be added to my car total and then

98
00:07:02,230 --> 00:07:03,890
at the end return here.

99
00:07:04,300 --> 00:07:06,610
Now I also need to return my new state.

100
00:07:06,610 --> 00:07:09,940
So return the other not state, not guitar.

101
00:07:09,940 --> 00:07:11,440
Sorry, so state.

102
00:07:11,560 --> 00:07:16,930
I'm copying all the properties from the state and then to that I would want to change will be total

103
00:07:17,530 --> 00:07:19,540
as well as the amount.

104
00:07:19,870 --> 00:07:23,530
Now let's see, we'll run it and notice how I'm getting three items.

105
00:07:23,890 --> 00:07:25,470
So why am I getting the three items.

106
00:07:25,480 --> 00:07:27,970
Because again, we use the reduced method.

107
00:07:28,330 --> 00:07:36,370
I loop Overmeyer, my Qaderi and then I just count how many items I have and then I return in my object

108
00:07:36,610 --> 00:07:39,670
the amount property with initial value of zero.

109
00:07:39,970 --> 00:07:46,300
But then of course since I had the structure out my amount and then override it in the state, in the

110
00:07:46,300 --> 00:07:48,730
old state and return it as new state.

111
00:07:48,960 --> 00:07:51,070
That's why I'm getting these values of three.

112
00:07:51,280 --> 00:07:55,390
So if I'm going to keep on increasing notice how my amount will also change.

113
00:07:55,690 --> 00:07:58,120
And similarly, we can work with the total.

114
00:07:58,300 --> 00:08:04,640
The only difference will be that we need to multiply price with the amount because think about it.

115
00:08:04,840 --> 00:08:07,000
So we have the total for total.

116
00:08:07,000 --> 00:08:12,640
Not only I need to know how many items are in the car, what would be the individual cost for each and

117
00:08:12,640 --> 00:08:13,110
every item.

118
00:08:13,120 --> 00:08:13,350
Right.

119
00:08:13,620 --> 00:08:18,760
So then for example, or multiply five by five hundred or one by someone.

120
00:08:19,390 --> 00:08:22,480
So in this case, I'm going to set up a separate variable product.

121
00:08:22,720 --> 00:08:25,390
So I'm going to go with const item total.

122
00:08:25,390 --> 00:08:28,630
So calculate each and every total for the item.

123
00:08:28,870 --> 00:08:36,670
And I want a simple we just go with price, then we multiply this by amount like so and then the same.

124
00:08:36,670 --> 00:08:43,210
How we work with a mount property in the total will do with eight or so.

125
00:08:43,210 --> 00:08:50,050
Let me move maybe amount down and we're going to go with cart total then property I'm looking for is

126
00:08:50,350 --> 00:08:53,950
total and it is equal to my item total.

127
00:08:54,160 --> 00:08:59,620
Now I'm sorry, we need to add it in each iteration and then of course now we have the correct totals.

128
00:09:00,160 --> 00:09:04,940
Now one thing with the total though, because we're going to be adding decimals, we might run into

129
00:09:04,940 --> 00:09:06,010
the following problem.

130
00:09:06,340 --> 00:09:11,980
So before we set up our state, I also would want to change my value of it and instead create a total

131
00:09:11,980 --> 00:09:12,500
would let.

132
00:09:12,530 --> 00:09:16,830
Of course, I can override it here in the bottom and I'm going to use two fixed first.

133
00:09:16,840 --> 00:09:19,780
So we're going to go with total to fixed.

134
00:09:19,810 --> 00:09:22,720
That's just going to make sure that we only have two decimals.

135
00:09:22,960 --> 00:09:29,860
And then since it's going to return a string, we're going to go with pass and float and then we're

136
00:09:29,860 --> 00:09:31,210
just going to wrap our total.

137
00:09:31,360 --> 00:09:37,840
So that way we're not going to have these crazy numbers at the max will have just two decimals after

138
00:09:37,840 --> 00:09:37,930
the.