1
00:00:00,230 --> 00:00:02,380
I'm the same way how we set up our move.

2
00:00:02,470 --> 00:00:08,670
I'm gonna do it with all my functions and if at the moment you're still iffy of how everything works

3
00:00:09,090 --> 00:00:10,930
lets out all the functions.

4
00:00:11,040 --> 00:00:16,620
So our functionality works and then I'm gonna repeat one more time everything that I said about reducer

5
00:00:16,950 --> 00:00:20,890
why we're doing something and when are we doing that.

6
00:00:20,940 --> 00:00:22,740
And we started with dispatch OK.

7
00:00:22,740 --> 00:00:23,870
That was awesome.

8
00:00:23,880 --> 00:00:27,610
And then in this case I can just delete whatever functionality I have there.

9
00:00:27,720 --> 00:00:30,970
Since now everything should work within our remove.

10
00:00:31,140 --> 00:00:32,060
We're going to save it.

11
00:00:32,160 --> 00:00:36,970
And up next we have increase among online for increased amount.

12
00:00:36,970 --> 00:00:40,020
It's gonna be exactly the same in the cart.

13
00:00:40,020 --> 00:00:43,850
We're gonna go with dispatch function and type is gonna be a bit different.

14
00:00:43,860 --> 00:00:49,260
So we're gonna go with TYPE AND WE'RE GONNA BE LOOKING FOR increase increase.

15
00:00:49,380 --> 00:00:54,570
And then again we're gonna use our payload property to pass in the 80.

16
00:00:54,600 --> 00:00:55,470
We're gonna save it.

17
00:00:55,470 --> 00:01:00,500
And then within reducer we also need to check for the type of increase.

18
00:01:00,510 --> 00:01:01,130
Correct.

19
00:01:01,200 --> 00:01:03,440
Because for now we're just checking for.

20
00:01:03,970 --> 00:01:08,490
And I'm gonna copy and paste the line I guess I'm going to copy paste.

21
00:01:08,490 --> 00:01:13,800
Case is gonna be increase and you know what since I'm gonna be adding a rest of them I'm gonna copy

22
00:01:13,800 --> 00:01:15,270
and paste them right now as well.

23
00:01:15,370 --> 00:01:21,780
Some will go for increase and then we're gonna have to decrease one and then we're gonna have add to

24
00:01:21,780 --> 00:01:23,430
cart clear cart.

25
00:01:24,000 --> 00:01:30,200
So let's have increase let's have decrease decrease.

26
00:01:30,350 --> 00:01:36,750
So then we also have add to cart add to cart.

27
00:01:36,780 --> 00:01:39,230
And lastly we have clear cart.

28
00:01:39,230 --> 00:01:41,040
This is the functionality we're gonna have.

29
00:01:41,100 --> 00:01:44,460
And for each and every one of them we're gonna set up some kind of functionality.

30
00:01:44,550 --> 00:01:50,280
And the most important thing you need to remember that we need to return a new state.

31
00:01:50,300 --> 00:01:55,880
So essentially when we use the filter method and that's what we're doing we're turning a new right.

32
00:01:56,040 --> 00:01:59,970
We're not mutating the older right that we passed in here.

33
00:01:59,970 --> 00:02:04,950
And then if we head back to cart we can see that for the increase.

34
00:02:04,950 --> 00:02:11,850
This was our functionality where essentially we used a map method we looped over our state and then

35
00:02:11,850 --> 00:02:14,470
we check if the item I.D. matched.

36
00:02:14,580 --> 00:02:21,570
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

37
00:02:21,570 --> 00:02:26,760
just gonna change around a bit where of course we're looking for the payload so I'm copying everything

38
00:02:26,760 --> 00:02:34,290
here starting from the square brackets all the way to set car I'm not going to use that card again we're

39
00:02:34,290 --> 00:02:40,200
not using that functionality and in this case I'm just gonna cut this out we're gonna head to reducer

40
00:02:40,650 --> 00:02:48,360
and then we're gonna return state then copy and paste of course we don't need the card anymore because

41
00:02:48,360 --> 00:02:52,760
we're gonna be mapping over state map returns a new array.

42
00:02:52,920 --> 00:03:00,150
So we're good to go because we always need to return a new of course state and then instead of I.D.

43
00:03:00,540 --> 00:03:03,400
matching the item I.D. We're checking for the payload.

44
00:03:03,450 --> 00:03:03,890
Why.

45
00:03:04,500 --> 00:03:13,040
Because we're passing in as a payload property it is action action of that payload.

46
00:03:13,210 --> 00:03:16,970
We're going to save that and everything works as expected.

47
00:03:16,970 --> 00:03:19,330
And next up we have decreased amount.

48
00:03:19,360 --> 00:03:21,380
Now I'm going to delete the previous two.

49
00:03:21,950 --> 00:03:24,860
OK so just so we don't have the mess up here.

50
00:03:24,950 --> 00:03:31,250
We're going to save that and for decrease it's going to be almost the same in reducer.

51
00:03:31,250 --> 00:03:37,640
But the difference is gonna be within the actual function because we still need to check our amount

52
00:03:38,080 --> 00:03:44,470
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

53
00:03:44,490 --> 00:03:45,420
one action.

54
00:03:45,560 --> 00:03:48,100
Otherwise we're going to dispatch a different one.

55
00:03:48,110 --> 00:03:51,830
So in this case we're not going to remove the item.

56
00:03:51,830 --> 00:03:57,810
We're going to say dispatch and I guess in this case I can just can't comment this and then we're going

57
00:03:57,810 --> 00:04:05,960
to have if amount is equal to one then we're gonna dispatch remove dispatch then we're passing the object

58
00:04:06,550 --> 00:04:12,410
and then remember we needed to have a type property value needs to be removed.

59
00:04:12,560 --> 00:04:17,940
Then we have a karma payload and payload is equal to an I.D..

60
00:04:17,990 --> 00:04:19,360
And of course where we're getting this.

61
00:04:19,370 --> 00:04:25,040
Well we're getting still when we click on the actual decrease correct we're getting the amount.

62
00:04:25,040 --> 00:04:26,390
We're checking the amount.

63
00:04:26,630 --> 00:04:30,370
If the amount is equal to 1 then I would wanted this patch removed.

64
00:04:30,380 --> 00:04:33,800
Now we've however amount is bigger than one.

65
00:04:33,950 --> 00:04:36,800
Then of course we would want to decrease the income.

66
00:04:36,980 --> 00:04:43,430
So we're gonna say here else and we're going to dispatch a different action and we say this patch and

67
00:04:43,430 --> 00:04:49,540
we're going to look for type and then the type is going to be decrease Mark.

68
00:04:49,580 --> 00:04:54,500
So we need to also passing the payload with an IED.

69
00:04:54,610 --> 00:04:57,160
Of course Heidi we're getting here as a parameter.

70
00:04:57,160 --> 00:05:03,340
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.

71
00:05:03,340 --> 00:05:05,010
This is going to be my function.

72
00:05:05,260 --> 00:05:11,590
But now we need to deal with two things within our reducer and the good news is that already within

73
00:05:11,590 --> 00:05:14,110
a reducer I'm handling the remove.

74
00:05:14,260 --> 00:05:16,750
So I only need to worry about the decrease.

75
00:05:16,750 --> 00:05:20,560
So we're gonna head to reducer and the same how we work with the increase.

76
00:05:20,560 --> 00:05:25,620
Remember where we used a return state map and then we'll look for that item.

77
00:05:25,690 --> 00:05:28,140
We're going to do the same thing here.

78
00:05:28,180 --> 00:05:31,690
So I'm just going to copy and paste this for decrease.

79
00:05:31,690 --> 00:05:36,880
And then again we're looking for the payload because that's what we passed in by the way I misspelled

80
00:05:36,880 --> 00:05:37,780
here.

81
00:05:37,780 --> 00:05:39,790
Action that payload.

82
00:05:39,790 --> 00:05:40,600
Sorry about that.

83
00:05:40,750 --> 00:05:42,700
A load.

84
00:05:42,700 --> 00:05:45,910
And then we would want to decrease the item instead.

85
00:05:45,910 --> 00:05:50,000
So instead of Plus One we're going to go with minus one.

86
00:05:50,080 --> 00:05:55,030
Then I'm going to quickly gonna do Clear card because that's going to be simple one where we just go

87
00:05:55,030 --> 00:05:57,490
with the return and we would want to return.

88
00:05:57,510 --> 00:05:58,360
And you're right.

89
00:05:58,810 --> 00:06:05,110
That's all we have to do because add to cart is gonna be bit longer then also let's fix our function.

90
00:06:05,110 --> 00:06:09,940
So instead of add the cart we're going to go with clear cart and remember we need to dispatch an action

91
00:06:10,270 --> 00:06:12,550
that would match whatever I have here.

92
00:06:12,550 --> 00:06:13,420
So what is the name.

93
00:06:13,430 --> 00:06:14,940
Well that is a clear card.

94
00:06:15,130 --> 00:06:22,750
So we're gonna go with dispatch then we need to pass in the object type and then we're looking for clear

95
00:06:23,710 --> 00:06:27,020
cart and there's the reason why I'm typing everything altogether.

96
00:06:27,020 --> 00:06:31,610
I'm going to show you as we're setting up the variable a bit more straightforward method.

97
00:06:31,610 --> 00:06:36,770
But in this case we're just going to go dispatch clear cart and within the reducer Of course we're handling

98
00:06:36,770 --> 00:06:43,450
that where we have clear cart and we're just returning the array and the last one is of course our add

99
00:06:43,450 --> 00:06:48,550
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

100
00:06:48,550 --> 00:06:50,420
to look for the cart.

101
00:06:50,600 --> 00:06:56,960
So whatever cart I have in the state right now then I'm going to look for find someone to use find method

102
00:06:57,410 --> 00:07:02,300
and I would want to get the item that matches the idea that I have in the product.

103
00:07:02,300 --> 00:07:08,040
So if the item I d matches the product of that of course is going to be my item.

104
00:07:08,060 --> 00:07:14,600
So if the item is there if we go with each item if the item is there then I would want to dispatch one

105
00:07:14,600 --> 00:07:15,350
action.

106
00:07:15,350 --> 00:07:20,450
And then if the item is not there then we're going to dispatch another action if the item is there then

107
00:07:20,450 --> 00:07:22,700
we're going to dispatch increase.

108
00:07:22,800 --> 00:07:28,010
So let's cut and paste we're going to dispatch increase if the item is not there then we're going to

109
00:07:28,010 --> 00:07:36,140
dispatch Add to Cart we're going to go add to cart or in this case we need to remember that payload

110
00:07:36,200 --> 00:07:42,710
is not just gonna be ADHD because the idea we're passing in the increase amount in this case we need

111
00:07:42,710 --> 00:07:44,760
to look for product data.

112
00:07:44,930 --> 00:07:52,520
Some say if the item is there then just use payload and use product idea within a payload that is going

113
00:07:52,520 --> 00:07:58,020
to be my day if I would want to add to cart that I'm just gonna passing the whole product.

114
00:07:58,040 --> 00:08:00,840
So notice how the functionality is exactly the same.

115
00:08:01,040 --> 00:08:06,740
I'm passing in the payload and the value is the idea that I'm passing within the increased amount.

116
00:08:06,750 --> 00:08:10,930
However when I'm adding to the cart I'm still passing in the 80.

117
00:08:10,970 --> 00:08:16,580
So my functionality within the reducer is still going to work where I'm still gonna get my I.D. in the

118
00:08:16,580 --> 00:08:21,300
payload however it's coming from different place now it's coming from the product.

119
00:08:21,470 --> 00:08:27,320
Since when we used add to cart we of course passed in the product and now we just need to make sure

120
00:08:27,320 --> 00:08:28,470
that we handle.

121
00:08:28,490 --> 00:08:29,120
Add to Cart.

122
00:08:29,510 --> 00:08:36,650
So we're gonna head back to our reducer and then we're going to look for our Add to Cart and now.

123
00:08:37,040 --> 00:08:45,410
Well now I want to get the properties out of my payload because remember payload was my product so cost.

124
00:08:45,410 --> 00:08:50,250
And then we look for I.D. image title.

125
00:08:50,250 --> 00:08:56,010
Price is equal to action payload and then.

126
00:08:56,010 --> 00:09:03,390
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

127
00:09:04,030 --> 00:09:10,440
like so and then within the object we're gonna use the S6 where we can just access the properties so

128
00:09:10,440 --> 00:09:20,190
I.D. image title price and it's going to be amount that is gonna be equal to 1 Same like we had before

129
00:09:20,670 --> 00:09:25,410
and then since we need to return a new state we're going to go with the return.

130
00:09:25,410 --> 00:09:30,630
Then we're going to use a spread operator where we copy our old state and we just add a new product

131
00:09:30,970 --> 00:09:32,070
we save that.

132
00:09:32,130 --> 00:09:35,830
And now if we're going to try to set up to cart everything should work.

133
00:09:36,120 --> 00:09:41,370
So we have the products I can check it out the product and then if I go add to cart of course the item

134
00:09:41,370 --> 00:09:42,630
has been added to the cart.

135
00:09:42,840 --> 00:09:48,960
I can increase the amount I can decrease amount and let's try with another one just so we can see for

136
00:09:48,960 --> 00:09:50,070
sure.

137
00:09:50,070 --> 00:09:54,570
Add to Cart for our move then of course the item has been removed to cart.

138
00:09:54,630 --> 00:10:00,090
And then lastly if I check out my local storage as should still see the.

139
00:10:00,440 --> 00:10:05,420
So application then we look for local hosts and of course I have my cart.