1
00:00:00,410 --> 00:00:05,980
And the way you use reducer works is we are dispatching an action and you can think of action.

2
00:00:06,150 --> 00:00:11,700
What we would want to do and in our case is gonna be simply removing the item.

3
00:00:11,760 --> 00:00:13,100
So how that is going to look like.

4
00:00:13,560 --> 00:00:20,730
Well we're going to write dispatch and then we pass in our method and then we need to pass in the object.

5
00:00:20,820 --> 00:00:24,570
So we're gonna pass in the object within the dispatch function.

6
00:00:24,930 --> 00:00:32,550
An object always always needs to have a type property so it needs to have a tag and then type is just

7
00:00:32,550 --> 00:00:34,780
going to say what kind of action type we would want.

8
00:00:34,900 --> 00:00:40,440
Again in our case since we have remove item functionality I'm just not type here.

9
00:00:40,470 --> 00:00:45,720
Remove and common convention is using all capital case letters.

10
00:00:45,720 --> 00:00:47,240
No you don't have to do that.

11
00:00:47,250 --> 00:00:54,240
But again it is a convention where you just type your action with all caps and then again you can name

12
00:00:54,240 --> 00:00:57,330
this whatever you want you can call this bunny.

13
00:00:57,490 --> 00:01:04,050
A matter in my case though since we are removing their item that's the reason why I used type.

14
00:01:04,200 --> 00:01:06,250
And then I set it equal to remove.

15
00:01:06,330 --> 00:01:08,830
So we have this patch in action now.

16
00:01:09,360 --> 00:01:15,870
Well now we would want to check within reducer for that particular action because remember we have the

17
00:01:15,870 --> 00:01:21,060
state and the state that we're passing in is in fact the second argument.

18
00:01:21,060 --> 00:01:27,630
So when we set up use a reducer and we pass here get a card from local storage that is the state that

19
00:01:27,630 --> 00:01:30,020
we're getting within the reducer.

20
00:01:30,090 --> 00:01:32,130
That's the state we're accessing.

21
00:01:32,130 --> 00:01:37,440
So again you can think of the state that you're going to be displaying in your court and in our case

22
00:01:37,800 --> 00:01:39,170
we also have an action.

23
00:01:39,330 --> 00:01:43,160
And the way it works within the reducer we check for those actions.

24
00:01:43,170 --> 00:01:51,300
Now what can you say if and then action type action type and then we're going to go with is equal to

25
00:01:51,390 --> 00:01:57,000
A remove if that is the case then I would want to do something you could do it this way or you could

26
00:01:57,000 --> 00:02:03,900
use a switch the other way switch statement works is in the following way where we would type switch

27
00:02:04,260 --> 00:02:09,550
then we're gonna say that we're going to depend on action type so whatever type of action we're gonna

28
00:02:09,560 --> 00:02:10,150
have.

29
00:02:10,290 --> 00:02:15,180
And then if the case is going to be removed then of course we would want to do something.

30
00:02:15,180 --> 00:02:19,380
However there's also gonna be default one where we need to return a state.

31
00:02:19,410 --> 00:02:21,270
Now why are we returning a state.

32
00:02:21,420 --> 00:02:27,390
Because there's gonna be cases where your action type doesn't match anything that we've passed in here.

33
00:02:27,390 --> 00:02:33,320
Now that would be by mistake or that could be by purpose doesn't really matter but it might be the cases

34
00:02:33,330 --> 00:02:37,890
where you just want to return a state because you always always want to return a state from reducer

35
00:02:38,220 --> 00:02:42,360
because that is what's responsible for the functionality where we can always display that state.

36
00:02:42,840 --> 00:02:46,810
So we're going to go default and then we're going to return a state.

37
00:02:46,950 --> 00:02:53,970
So again we could have set this up using ifs but common convention is using switch so we delete our

38
00:02:53,970 --> 00:02:55,050
state OK.

39
00:02:55,170 --> 00:02:59,790
But we're still returning this by default because that is the case and now we're going to set up our

40
00:02:59,790 --> 00:03:01,620
first case where we're going say.

41
00:03:01,620 --> 00:03:05,400
CASE AND THEN WE'RE LOOKING FOR OUR STRING OF remove.

42
00:03:05,820 --> 00:03:12,660
So if the action type is remove and then of course we're gonna do something remove and what we would

43
00:03:12,660 --> 00:03:13,460
want to do.

44
00:03:13,530 --> 00:03:20,400
Well we're getting our state and the way it works with the reducer we always always need to return a

45
00:03:20,400 --> 00:03:21,990
new state.

46
00:03:21,990 --> 00:03:25,650
So state needs to be new and in our case what is the state.

47
00:03:25,680 --> 00:03:26,940
Well that is all right.

48
00:03:26,990 --> 00:03:27,320
Right.

49
00:03:27,570 --> 00:03:32,480
Because we check for the card and if the card is not there where returning an empty array.

50
00:03:32,580 --> 00:03:36,090
So we cannot just mutate the state directly.

51
00:03:36,180 --> 00:03:39,080
We always Always need to return a new state.

52
00:03:39,150 --> 00:03:45,120
And what do you think happens if we're using our filter method remember previously I copied all the

53
00:03:45,120 --> 00:03:50,780
values and then I said filter and then we were looking for the item that didn't match Daddy.

54
00:03:50,820 --> 00:03:53,560
Well the way it happens we're returning a new.

55
00:03:53,570 --> 00:03:54,240
All right.

56
00:03:54,300 --> 00:03:57,060
That's the reason why we're able to use the filter.

57
00:03:57,190 --> 00:04:03,420
Now technically in our example it wasn't that important or when you're using the reducer it is crucial

58
00:04:03,420 --> 00:04:08,060
that you're turning a new state meaning you can update the values.

59
00:04:08,070 --> 00:04:11,580
But the actual value of returning has to be a new state.

60
00:04:11,910 --> 00:04:17,130
And in our case if we're using filter the way it works we're going to return a new right.

61
00:04:17,430 --> 00:04:19,110
That's the reason where I can say all right.

62
00:04:19,440 --> 00:04:26,460
So case remove when I would want to remove the item I'm going to go with return then state that I'm

63
00:04:26,460 --> 00:04:32,160
gonna use the filter method and then we can use the same functionality we already have here where if

64
00:04:32,160 --> 00:04:37,440
the item I.D. is not matching well then we would want to remove that item.

65
00:04:37,440 --> 00:04:40,460
However there is a slight catch.

66
00:04:40,650 --> 00:04:42,580
So I'm just gonna copy and paste it here.

67
00:04:42,660 --> 00:04:47,850
Everything's fine but you're probably wondering OK but where are we getting this I.D..

68
00:04:48,300 --> 00:04:51,600
Because I know I have the item I.D. but it is not equal to I.D..

69
00:04:52,080 --> 00:04:52,540
Okay.

70
00:04:52,570 --> 00:04:55,340
So we're passing in within the remove item.

71
00:04:55,410 --> 00:04:56,120
Correct.

72
00:04:56,190 --> 00:05:03,670
But as you see once I dispatch the action I'm not passing the ideas down to my producer and the common

73
00:05:03,670 --> 00:05:07,500
convention is setting this up within the payload property.

74
00:05:07,540 --> 00:05:14,410
So you must must must have the type property with whatever action you don't want to do but then Optionally

75
00:05:14,710 --> 00:05:21,040
you can pass in whatever data and in our case the data we're gonna be passing in is going to be an I.D.

76
00:05:21,420 --> 00:05:23,980
and the way it's gonna work we're gonna go with payload.

77
00:05:24,070 --> 00:05:28,440
Again this is an option you could call this Bunny doesn't matter.

78
00:05:28,450 --> 00:05:33,250
I'm gonna show you in a second how you can access it but a common convention is calling this payload

79
00:05:33,700 --> 00:05:35,870
and then just past the 80.

80
00:05:36,050 --> 00:05:41,310
And in this case since my payload property is equal to an I.D. that I'm passing in.

81
00:05:41,560 --> 00:05:49,390
If I had to reducer then instead of looking for just some random I.D. I can say stay that filter so

82
00:05:49,390 --> 00:05:55,540
I'm returning a new array then check for the items that don't have the idea that I'm passing in and

83
00:05:55,540 --> 00:06:02,820
where I'm passing in the actual I.D. property while I'm passing in within the action payload.

84
00:06:02,830 --> 00:06:04,970
That of course is my property name.

85
00:06:05,050 --> 00:06:07,980
We're going to save it and then everything is gonna work.

86
00:06:07,990 --> 00:06:11,850
Now of course we can remove the items since we don't have anything within a cart.

87
00:06:11,860 --> 00:06:17,410
We have the empty cart so we would need to of course fix the rest of the functionality.

88
00:06:17,410 --> 00:06:19,810
And then once we do that we can start this thing out.

89
00:06:19,870 --> 00:06:22,330
Whether everything makes sense as always.

90
00:06:22,330 --> 00:06:28,660
Just remember the most important thing where from reducer you want to return a new state.

91
00:06:28,660 --> 00:06:32,450
Since in our case the actual state wasn't all right.

92
00:06:32,710 --> 00:06:37,960
If we use filter then of course we're returning and you hurry if you're not going to do that and your

93
00:06:37,960 --> 00:06:39,260
functionality is not going to work.