1
00:00:00,650 --> 00:00:07,160
Once the user clicks on a remove button, we are dispatching our of action, so now we just need to

2
00:00:07,160 --> 00:00:12,710
take care of the functionality or let's think about it so we remove functionality.

3
00:00:13,070 --> 00:00:18,100
Wouldn't we need some kind of info of which item are we removing?

4
00:00:18,980 --> 00:00:22,520
If I ask you a question, most likely the answer is yes.

5
00:00:23,000 --> 00:00:24,850
Now, let's take a look at the crimes.

6
00:00:24,890 --> 00:00:31,200
And I can see that each of them has this ID Suadi one and two and then ID three.

7
00:00:31,700 --> 00:00:35,950
Now, if I check in the card ihram, am I passing in the.

8
00:00:36,740 --> 00:00:42,590
I have the image, I have the title price and amount and then of course my remove so I'm not passing

9
00:00:42,590 --> 00:00:48,910
in the ID, so how would I be able to pass my ID to my producer.

10
00:00:49,250 --> 00:00:55,790
So that way of course in the user I would know which item on removing because regardless of what functionality

11
00:00:55,790 --> 00:01:02,060
you pick, you will need that specific I.D. to remove that item and the way it works in Redox we have

12
00:01:02,060 --> 00:01:03,610
something called payload.

13
00:01:04,010 --> 00:01:10,190
So let me switch back to a cart item, then let me scroll down and maybe close the sidebar as well.

14
00:01:10,610 --> 00:01:13,160
And let's take a look at the dispatch.

15
00:01:13,460 --> 00:01:20,600
So we have our dispatch and we know that we must, must, must, must have a type when we are dispatching

16
00:01:20,600 --> 00:01:21,170
an action.

17
00:01:21,320 --> 00:01:21,800
Correct.

18
00:01:22,160 --> 00:01:28,400
But we also can add more value here now if the type is necessary.

19
00:01:28,580 --> 00:01:34,190
So you can have dispatch and action without the time you can add whatever values you would like over

20
00:01:34,190 --> 00:01:34,390
here.

21
00:01:34,790 --> 00:01:39,170
However, in general, the common practice is calling this payload.

22
00:01:39,470 --> 00:01:44,420
Now, first of all, let me just show you how we would pass it and how we would check that introducer,

23
00:01:44,600 --> 00:01:48,680
some kind of random value, and then we'll use a actual payload.

24
00:01:49,070 --> 00:01:54,950
So in my case, I'm just going to add a comma since it is an object and then my key will be just some

25
00:01:54,950 --> 00:01:55,520
kind of idea.

26
00:01:55,880 --> 00:02:02,420
Now I'm going to go with idea of one and let's just double check in our juicer whether we have access

27
00:02:02,420 --> 00:02:02,690
to it.

28
00:02:03,020 --> 00:02:05,300
So I will head to my producer.

29
00:02:05,690 --> 00:02:07,000
Then I have the action.

30
00:02:07,190 --> 00:02:08,600
So what was the key?

31
00:02:08,990 --> 00:02:10,630
What was the name of Michy?

32
00:02:11,180 --> 00:02:13,550
The actual key, was it correct?

33
00:02:13,760 --> 00:02:17,380
So let's see whether we have access to it if we check for ammo.

34
00:02:17,690 --> 00:02:20,080
So I'm going to go with console log online.

35
00:02:20,090 --> 00:02:23,300
Instead of this, you remove amount, which doesn't make sense at all.

36
00:02:23,570 --> 00:02:25,130
So I guess I apologize for that.

37
00:02:25,400 --> 00:02:32,930
I'm going to try to access action and then ID, so let's go with action that it matters, of course,

38
00:02:32,930 --> 00:02:33,610
our name.

39
00:02:33,980 --> 00:02:40,160
And then if we click now on a console, I'm getting this hard coded value for all of them.

40
00:02:40,160 --> 00:02:44,450
Of course it is one because I hardcoded one, but that is already a success.

41
00:02:44,720 --> 00:02:52,730
So I know I can access this ID property, like I said, a common practice using a payload key and then

42
00:02:52,730 --> 00:02:57,740
set this up as an object and how that looks like in the card item instead of this ID.

43
00:02:58,680 --> 00:03:06,270
I would go with payload, then set it equal to an object, and then in fact we pass in whatever values

44
00:03:06,270 --> 00:03:06,700
you would want.

45
00:03:06,810 --> 00:03:10,950
Again, I will name my I.D., but you can name it whatever you want.

46
00:03:11,460 --> 00:03:14,460
Now, another question you probably have is this one.

47
00:03:14,860 --> 00:03:22,020
OK, so how we can pass this individual value, the one that we have specific for the actual item.

48
00:03:22,210 --> 00:03:27,750
Remember, each and every item have the ID and all of them have unique I.D., not just one.

49
00:03:28,170 --> 00:03:31,790
So how we can get it is the one we used map dispatched.

50
00:03:31,920 --> 00:03:37,260
Perhaps we have a second parameter and second parameter is own props.

51
00:03:37,620 --> 00:03:43,740
So whatever props are being passed in the component and if I would want to access it, I just type comma

52
00:03:44,070 --> 00:03:45,690
and then own props.

53
00:03:45,930 --> 00:03:47,190
As I always remember.

54
00:03:47,190 --> 00:03:48,720
It is a primer.

55
00:03:49,020 --> 00:03:50,490
So you can call this Bakan.

56
00:03:50,850 --> 00:03:51,740
Doesn't really matter.

57
00:03:51,750 --> 00:03:56,010
You'll still have access to all the problems that are being passed in a component.

58
00:03:56,220 --> 00:04:01,440
And in order to show how it looks like, I'm going to go with console log and then let's take a look

59
00:04:01,440 --> 00:04:03,360
at our second primer.

60
00:04:03,570 --> 00:04:04,980
So once we cancel, log it.

61
00:04:05,100 --> 00:04:10,460
First of all, I have to complain because I passed in the ID and I didn't set any kind of value.

62
00:04:10,710 --> 00:04:14,880
So for the time being, again, let's set it to one so we don't have this nasty error.

63
00:04:15,300 --> 00:04:21,870
But then if I'm checking here, going can see that for each and every card item, I have the unique

64
00:04:21,870 --> 00:04:22,440
values here.

65
00:04:22,620 --> 00:04:25,440
So I have the title price amount.

66
00:04:25,620 --> 00:04:30,440
And for all of them, of course, it just matches whatever I have in the car items.

67
00:04:30,810 --> 00:04:33,300
Now just to showcase where are we getting this?

68
00:04:33,300 --> 00:04:40,800
Of course, in the card container when we're mapping over our cart array, I have the card item I said

69
00:04:40,800 --> 00:04:47,100
is equal to an item ID and then I use the spread operator again to get all the properties that are in

70
00:04:47,100 --> 00:04:47,510
the item.

71
00:04:47,910 --> 00:04:49,920
That's why we're pretty much processing everything.

72
00:04:50,310 --> 00:04:58,230
So now in the card item, once I have access to my own props, what I can do well, I can just the structure

73
00:04:58,230 --> 00:05:01,050
of the ID and pass it in my payload.

74
00:05:01,050 --> 00:05:01,550
Correct.

75
00:05:01,980 --> 00:05:04,680
So let's do consed then.

76
00:05:04,680 --> 00:05:05,570
I'm going to be looking for.

77
00:05:05,580 --> 00:05:09,840
Any idea of course will be a key in this object.

78
00:05:10,170 --> 00:05:15,060
So let's write on prompts and then let's set ID equal to ID.

79
00:05:15,480 --> 00:05:22,910
So again we can do the long way ID equals to ID or with ESX is the key name is equal to a value name

80
00:05:22,920 --> 00:05:23,610
that we're passing.

81
00:05:23,850 --> 00:05:30,510
I can just have a shortcut and now I'm passing in my Miraldi So now if I pop over to my reducer and

82
00:05:30,510 --> 00:05:39,260
change from action ID to action payload ID because of course there is no more ID property on the action

83
00:05:39,270 --> 00:05:43,920
object because we renamed it the payload and then place the ID in the payload.

84
00:05:44,250 --> 00:05:51,690
Now in register I can just say action payload and then that ID, let's say that.

85
00:05:51,840 --> 00:05:57,120
And now if I click on remove notice this is number one, number two and number three.

86
00:05:57,510 --> 00:06:03,360
And now that we have all the setup, of course now we just need to come up with a functionality.

87
00:06:03,750 --> 00:06:10,440
So if the action type is equal to remove what we would want to do, well, we'll start by again returning

88
00:06:10,440 --> 00:06:11,220
a new object.

89
00:06:12,090 --> 00:06:17,160
DataDot then copy the values from the old state and then comma.

90
00:06:17,280 --> 00:06:21,500
And of course, we will set up some kind of new value for our card.

91
00:06:21,870 --> 00:06:27,720
Now, I do need to add or return here, otherwise I will have an error and I'm going to set equal card.

92
00:06:28,050 --> 00:06:35,550
And now since filter method on the array returns Ainura, I can just say card is equal and then state

93
00:06:35,550 --> 00:06:35,910
card.

94
00:06:36,090 --> 00:06:44,040
So I'm looking for the old card in the state or the old state card, whatever you want, and then use

95
00:06:44,040 --> 00:06:45,450
the filter method on it.

96
00:06:45,810 --> 00:06:52,710
So you know that for the filter we will iterate over array and then we will call the callback function

97
00:06:52,860 --> 00:06:55,440
against each and every item in order.

98
00:06:55,710 --> 00:07:03,510
And I simply would want to check if the item ID matches to whatever I passed here as a payload and of

99
00:07:03,510 --> 00:07:05,370
course that item will be removed.

100
00:07:05,640 --> 00:07:12,930
So I'm going to say if the individual item, if it matches, then it will not be returned in my new.

101
00:07:12,930 --> 00:07:13,340
All right.

102
00:07:13,620 --> 00:07:20,010
So we have the callback function and then in the callback function, the parameter represents that particular

103
00:07:20,130 --> 00:07:21,270
item in the era.

104
00:07:21,480 --> 00:07:26,580
And since it is a parameter, we can call it whatever we would want, but we just set up my callback

105
00:07:26,580 --> 00:07:32,100
function first and then let's right here card item that will be name of my parameter.

106
00:07:32,460 --> 00:07:40,020
And I only would want to return the item if the item ID does not match the payload ID that I'm passing

107
00:07:40,260 --> 00:07:41,820
from the correct item.

108
00:07:42,060 --> 00:07:47,640
And since I it's going to be a one liner, might as well can actually skip the curly braces.

109
00:07:47,880 --> 00:07:55,560
And I'm just going to say cart item I d there's not much actual ID that I'm passing.

110
00:07:55,740 --> 00:07:57,870
And remember the property was actually.

111
00:07:58,520 --> 00:08:04,670
And then payload, since we set up our own object and then we have the ID, so now of course, let's

112
00:08:04,670 --> 00:08:10,210
say that and we'll see that the moment I click on it, I'm removing the item and the second one, then

113
00:08:10,220 --> 00:08:10,730
a third one.

114
00:08:10,980 --> 00:08:15,860
Of course, we can repeat this as many times you would want this time maybe from the back.

115
00:08:16,040 --> 00:08:17,960
So last one, last one.

116
00:08:18,140 --> 00:08:19,760
And the last one is removed.

117
00:08:20,230 --> 00:08:24,230
That's how we can set up remove functionality in our application.