Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,300 --> 00:00:04,530
Now, when we remove items from the cart
2
00:00:04,530 --> 00:00:06,640
we wanna get a State and Action,
3
00:00:06,640 --> 00:00:09,620
because again we'll get some extra payload that helps us
4
00:00:09,620 --> 00:00:12,830
identify the item that should be removed.
5
00:00:12,830 --> 00:00:16,160
And here I expect that my payload is just the idea
6
00:00:16,160 --> 00:00:17,220
of the item.
7
00:00:17,220 --> 00:00:18,500
I can expect this
8
00:00:18,500 --> 00:00:21,420
because I am the one writing this code here.
9
00:00:21,420 --> 00:00:23,910
And with that, we now wanna find that item
10
00:00:23,910 --> 00:00:26,430
and remove it from the array.
11
00:00:26,430 --> 00:00:28,810
Now, we don't need to check if it's part of the array
12
00:00:28,810 --> 00:00:30,770
we know that it will be part
13
00:00:30,770 --> 00:00:35,020
but we need to find out how many items are in the array.
14
00:00:35,020 --> 00:00:37,670
So for this again, I'll get my existing item
15
00:00:37,670 --> 00:00:40,860
by reaching out to state.items
16
00:00:40,860 --> 00:00:44,930
and finding the item where the item.id === id
17
00:00:44,930 --> 00:00:46,263
I'm getting as a payload.
18
00:00:47,460 --> 00:00:48,790
And then we wanna check
19
00:00:48,790 --> 00:00:52,920
if existingItem.quantity===1
20
00:00:52,920 --> 00:00:55,190
If it's one, then we wanna remove the item
21
00:00:55,190 --> 00:00:57,510
from the array entirely.
22
00:00:57,510 --> 00:00:59,370
If it's greater than one,
23
00:00:59,370 --> 00:01:03,480
we just wanna reduce the quantity by one.
24
00:01:03,480 --> 00:01:05,340
So, the else case is simpler.
25
00:01:05,340 --> 00:01:08,320
In the else case that we have more than one item,
26
00:01:08,320 --> 00:01:12,293
we just reach out to the quantity and decrease it by one.
27
00:01:13,250 --> 00:01:14,590
But if the quantity is one,
28
00:01:14,590 --> 00:01:17,220
we wanna remove the item from the array.
29
00:01:17,220 --> 00:01:18,620
And we can do this by
30
00:01:18,620 --> 00:01:22,690
setting state.items = state.items.filter
31
00:01:22,690 --> 00:01:26,360
and then filter out that one item that we wanna remove.
32
00:01:26,360 --> 00:01:28,670
That overwrites the array of items
33
00:01:28,670 --> 00:01:31,580
with a new array where this item
34
00:01:31,580 --> 00:01:34,190
which we wanna remove will be missing.
35
00:01:34,190 --> 00:01:36,440
And it will it be missing because we filter
36
00:01:36,440 --> 00:01:41,440
40 item where the item.id !== id.
37
00:01:41,440 --> 00:01:43,280
So, we keep all the items,
38
00:01:43,280 --> 00:01:46,210
where the ids do not match the one id
39
00:01:46,210 --> 00:01:47,880
we're trying to remove.
40
00:01:47,880 --> 00:01:51,550
And therefore for 40 item where the id is equal,
41
00:01:51,550 --> 00:01:54,680
we'll filter that out and remove it therefore.
42
00:01:54,680 --> 00:01:56,530
That's how we can update these items
43
00:01:56,530 --> 00:01:58,870
to remove the one item that should be removed
44
00:01:58,870 --> 00:02:02,053
from the array whilst keeping all the other items.
45
00:02:03,770 --> 00:02:05,760
And that logic should work.
46
00:02:05,760 --> 00:02:08,169
I guess we're going to see it once we tested
47
00:02:08,169 --> 00:02:10,360
but it does look good to me.
48
00:02:10,360 --> 00:02:13,960
Now, here's a quick note from Max from the future.
49
00:02:13,960 --> 00:02:16,508
I forgot one important step here, which you should add
50
00:02:16,508 --> 00:02:20,490
and which I will add later in this module
51
00:02:20,490 --> 00:02:22,920
but which is missing at the moment.
52
00:02:22,920 --> 00:02:25,220
When we remove item from the cart
53
00:02:25,220 --> 00:02:28,210
and the item is still part of the cart,
54
00:02:28,210 --> 00:02:30,090
so the quantity, wasn't one
55
00:02:30,090 --> 00:02:32,760
then just updating the quantity as I'm doing it here,
56
00:02:32,760 --> 00:02:33,720
is not enough.
57
00:02:33,720 --> 00:02:36,760
We also should update the total price of that item.
58
00:02:36,760 --> 00:02:40,080
And we do a sell by adding existingItem.totalPrice
59
00:02:42,950 --> 00:02:44,020
and setting that equal
60
00:02:44,020 --> 00:02:48,377
to existingItem.totalPrice - exsistingItem.price.
61
00:02:49,940 --> 00:02:52,610
So, deducting the price of a single unit
62
00:02:52,610 --> 00:02:56,650
from the total price since we are removing one unit.
63
00:02:56,650 --> 00:02:58,720
That's a line of code you should add here.
64
00:02:58,720 --> 00:03:00,630
I have not edited here,
65
00:03:00,630 --> 00:03:03,010
again, I will add it later in this module
66
00:03:03,010 --> 00:03:04,830
because I overlooked it here,
67
00:03:04,830 --> 00:03:06,550
I'm just showing it to you right now
68
00:03:06,550 --> 00:03:10,320
because of course you should have that extra line in there.
69
00:03:10,320 --> 00:03:13,640
Now I'll store this Slice in another constant,
70
00:03:13,640 --> 00:03:17,120
the cartSlice and of course we'll export it here.
71
00:03:17,120 --> 00:03:20,440
We'll export it as a file default,
72
00:03:20,440 --> 00:03:22,640
and we will also export the actions
73
00:03:22,640 --> 00:03:26,210
because of course we will need to dispatch those actions.
74
00:03:26,210 --> 00:03:27,840
So, I export a named.
75
00:03:27,840 --> 00:03:30,040
Export here I add a named export,
76
00:03:30,040 --> 00:03:33,740
exporting a constant which I'll name cartActions
77
00:03:34,585 --> 00:03:37,493
where I access cartSlice.actions.
78
00:03:38,710 --> 00:03:39,970
Now in index.JS,
79
00:03:39,970 --> 00:03:44,940
I wanna merge this new Slice into my overall Redux store.
80
00:03:44,940 --> 00:03:47,140
So, I'll import cartSlice from ./carte-slice
81
00:03:49,980 --> 00:03:54,470
and add this as a number of reducer in my reducer map.
82
00:03:54,470 --> 00:03:58,280
Maybe we use cart as a key here
83
00:03:58,280 --> 00:04:02,793
and then here point at cartSlice.reducer, okay.
84
00:04:03,640 --> 00:04:05,950
With that, we added this as well.
85
00:04:05,950 --> 00:04:08,210
Now, let's wire it up.
86
00:04:08,210 --> 00:04:12,170
and for wiring it up, I actually need real products.
87
00:04:12,170 --> 00:04:15,530
In Products.js, I have a hard coded product here,
88
00:04:15,530 --> 00:04:17,630
and that makes no sense.
89
00:04:17,630 --> 00:04:19,750
This should be generated dynamically
90
00:04:19,750 --> 00:04:23,630
so that we have real product data with which we can work.
91
00:04:23,630 --> 00:04:26,610
Now we could manage our products with Redux as well
92
00:04:26,610 --> 00:04:28,480
that might be a nice practice,
93
00:04:28,480 --> 00:04:31,300
setting up another Slice for products,
94
00:04:31,300 --> 00:04:33,680
but since we don't do anything with the products
95
00:04:33,680 --> 00:04:36,230
since we don't add or delete products,
96
00:04:36,230 --> 00:04:39,840
I'll instead just add a DUMMY PRODUCT array here
97
00:04:39,840 --> 00:04:43,090
in the products component, which is an array.
98
00:04:43,090 --> 00:04:46,110
And I'll set up my DUMMY PRODUCT data there.
99
00:04:46,110 --> 00:04:48,410
Now every product should have an id,
100
00:04:48,410 --> 00:04:53,410
because in the cartSlice, we are working with that id here
101
00:04:54,230 --> 00:04:59,160
and we should therefore also have a price and a title then.
102
00:04:59,160 --> 00:05:01,000
And hence here, I'll add an id.
103
00:05:01,000 --> 00:05:06,000
Let's say an id of p1 and a price of six
104
00:05:06,900 --> 00:05:11,300
and title of 'My First Book'
105
00:05:11,300 --> 00:05:12,700
and then also a description
106
00:05:12,700 --> 00:05:14,410
because we need that down there
107
00:05:14,410 --> 00:05:16,410
for outputting the product item.
108
00:05:16,410 --> 00:05:21,410
So, I'll add a description of 'The first book I ever wrote.'
109
00:05:21,580 --> 00:05:22,880
It's just some dummy data
110
00:05:22,880 --> 00:05:24,830
so I'm not spending too much time
111
00:05:24,830 --> 00:05:27,980
on preparing the best possible data here.
112
00:05:27,980 --> 00:05:30,850
Now, I will add another product with an id: p2
113
00:05:30,850 --> 00:05:34,450
and a price of five, which is 'My Second Book.'
114
00:05:34,450 --> 00:05:37,640
I'm super inspired, as you can tell.
115
00:05:37,640 --> 00:05:38,910
So, that's the second book,
116
00:05:38,910 --> 00:05:40,650
'The second book I ever wrote,'
117
00:05:40,650 --> 00:05:42,830
and now we've got some dummy data.
118
00:05:42,830 --> 00:05:44,510
Now I wanna use that dummy data
119
00:05:44,510 --> 00:05:47,640
to dynamically rendered these product items.
120
00:05:47,640 --> 00:05:49,908
So, here in add-on add list,
121
00:05:49,908 --> 00:05:54,908
I'll map all those DUMMY PRODUCTS into product items.
122
00:05:55,250 --> 00:05:57,290
So, I'll paste that in there
123
00:05:57,290 --> 00:06:01,230
and set title= product.title,
124
00:06:01,230 --> 00:06:06,140
set the price=product.price and you guessed it,
125
00:06:06,140 --> 00:06:09,740
sets the description=product.description.
126
00:06:09,740 --> 00:06:13,390
And since we're mapping give every product item
127
00:06:13,390 --> 00:06:16,783
a key of product.id to help React.
128
00:06:17,830 --> 00:06:19,680
So, now we got the product data
129
00:06:19,680 --> 00:06:21,640
we can now work with that data,
130
00:06:21,640 --> 00:06:24,800
and I wanna start instead of the product item,
131
00:06:24,800 --> 00:06:27,550
there I have the Add to Cart button.
132
00:06:27,550 --> 00:06:31,900
And we wanna wire this button up to this function
133
00:06:31,900 --> 00:06:35,307
to the addItemToCart function in our cartSlice.
134
00:06:36,559 --> 00:06:41,457
So, in ProductItem I will add new function here,
135
00:06:41,457 --> 00:06:45,910
addToCartHandler where I wanna dispatch
136
00:06:45,910 --> 00:06:47,790
the appropriate action.
137
00:06:47,790 --> 00:06:50,710
Now of course, we still dispatch actions as we learned it,
138
00:06:50,710 --> 00:06:55,710
so we import useDispatch from react-redux to get access
139
00:06:57,350 --> 00:06:59,530
to this dispatch function
140
00:06:59,530 --> 00:07:03,427
by then executing useDispatch in the ProductItem.
141
00:07:04,340 --> 00:07:08,050
And then here in addToCartHandler, I called dispatch
142
00:07:08,050 --> 00:07:11,230
and now we need to get access to the cartActions.
143
00:07:11,230 --> 00:07:16,230
So, I will import cartActions from going up,
144
00:07:16,620 --> 00:07:19,623
going up store/cart-slice,
145
00:07:20,870 --> 00:07:23,493
and then here dispatch cartActions.addItemToCart.
146
00:07:27,730 --> 00:07:30,740
Now we again execute this action creator function
147
00:07:30,740 --> 00:07:33,810
but now we also need to pass data to it,
148
00:07:33,810 --> 00:07:37,570
because we now want to pass that product
149
00:07:37,570 --> 00:07:41,750
which should be added to that addItemToCart function.
150
00:07:41,750 --> 00:07:43,523
We are expecting it there.
151
00:07:44,810 --> 00:07:46,640
Now there, we need to work with the id
152
00:07:46,640 --> 00:07:49,180
and price and we need to title,
153
00:07:49,180 --> 00:07:53,030
so we should make sure that we send all that data.
154
00:07:53,030 --> 00:07:56,130
Now in ProductItem, I do have the title and the price,
155
00:07:56,130 --> 00:07:57,890
but not the id.
156
00:07:57,890 --> 00:08:01,310
So, I will always expect the id as a prop now,
157
00:08:01,310 --> 00:08:06,180
and in Products.js, I will forward the id like this.
158
00:08:06,180 --> 00:08:08,950
So that we have it available inside of ProductItem
159
00:08:08,950 --> 00:08:10,920
and therefore, inside of ProductItem
160
00:08:10,920 --> 00:08:13,290
when we add an item to the cart here,
161
00:08:13,290 --> 00:08:16,870
I pass an object as a payload to this action.
162
00:08:16,870 --> 00:08:19,130
And this object has an id field
163
00:08:19,130 --> 00:08:23,450
which points at this id, which we're extracting from props.
164
00:08:23,450 --> 00:08:25,920
And we can therefore always use the shortcut
165
00:08:25,920 --> 00:08:29,430
and do the same for title and for price.
166
00:08:29,430 --> 00:08:33,590
So, that this is the object we are dispatching.
167
00:08:33,590 --> 00:08:37,130
And again, I'm using that modern JavaScript shortcut here,
168
00:08:37,130 --> 00:08:40,610
where when the key name and the variable name
169
00:08:40,610 --> 00:08:42,720
holding the value are equal,
170
00:08:42,720 --> 00:08:46,620
we can omit the right side of the property assignment
171
00:08:46,620 --> 00:08:49,210
and just write down those property names
172
00:08:49,210 --> 00:08:52,560
and it's automatically expanded behind the scenes.
173
00:08:52,560 --> 00:08:54,310
So, we can just write it like this.
174
00:08:55,240 --> 00:08:58,480
This will now dispatch all the data we need to dispatch,
175
00:08:58,480 --> 00:09:01,330
and therefore we can now connect addToCartHandler
176
00:09:01,330 --> 00:09:02,940
to our button.
177
00:09:02,940 --> 00:09:04,407
So, here we add onClick
178
00:09:05,660 --> 00:09:09,013
and then point at the addToCartHandler.
179
00:09:10,110 --> 00:09:14,950
If we do this and I reload that should work,
180
00:09:14,950 --> 00:09:19,320
but we can't tell because we're not really updating the cart
181
00:09:19,320 --> 00:09:22,230
and we're not updating the batch here either.
182
00:09:22,230 --> 00:09:24,160
So, let's maybe start with the batch
183
00:09:24,160 --> 00:09:27,890
and for this let's again go to the CartButton component.
184
00:09:27,890 --> 00:09:29,920
There we already dispatch,
185
00:09:29,920 --> 00:09:32,490
now we also need data from the cart.
186
00:09:32,490 --> 00:09:34,840
We need to totalQuantity.
187
00:09:34,840 --> 00:09:37,460
And speaking of that, I just remembered
188
00:09:37,460 --> 00:09:41,100
that I forgot to update the totalQuantity.
189
00:09:41,100 --> 00:09:43,180
When we add an item to the cart,
190
00:09:43,180 --> 00:09:45,750
we don't just wanna update the existing item
191
00:09:45,750 --> 00:09:48,280
or the items array to be precise,
192
00:09:48,280 --> 00:09:50,923
we also wanna update the totalQuantity field.
193
00:09:51,870 --> 00:09:53,620
and therefore, we can simply say
194
00:09:53,620 --> 00:09:57,290
that no matter if we have an existing item or not,
195
00:09:57,290 --> 00:10:01,330
the totalQuantity will simply increase by one.
196
00:10:01,330 --> 00:10:04,543
We have one more item in the cart that is safe.
197
00:10:05,620 --> 00:10:08,470
And the same is true for removeItemFromCart.
198
00:10:08,470 --> 00:10:09,667
No matter if we have that item
199
00:10:09,667 --> 00:10:12,920
in the cart once or multiple times,
200
00:10:12,920 --> 00:10:16,970
we definitely wanna reduce the totalQuantity by one.
201
00:10:16,970 --> 00:10:21,490
So, we should add this code to removeItemFromCart.
202
00:10:21,490 --> 00:10:24,680
And with that, back in the CartButton,
203
00:10:24,680 --> 00:10:27,040
we can now read data from the state
204
00:10:27,040 --> 00:10:29,770
by also importing useSelector
205
00:10:29,770 --> 00:10:32,400
and then selecting a piece of data.
206
00:10:32,400 --> 00:10:34,550
So, we call useSelector,
207
00:10:34,550 --> 00:10:37,860
past is function for selecting data from the state
208
00:10:37,860 --> 00:10:39,830
and dive into state.cart,
209
00:10:41,382 --> 00:10:44,380
dot cart because in index.js here,
210
00:10:44,380 --> 00:10:46,340
we gave this a cart key
211
00:10:47,390 --> 00:10:48,890
and then into the properties
212
00:10:48,890 --> 00:10:51,930
we set up in the state of our cartSlice.
213
00:10:51,930 --> 00:10:54,930
So, in this case, we're interested in the totalQuantity,
214
00:10:54,930 --> 00:10:57,380
hence here we dive into state.card.totalQuantity
215
00:10:59,430 --> 00:11:03,853
and store this in, let's say CartQuantity constant.
216
00:11:04,880 --> 00:11:07,650
And now it's that CartQuantity constant,
217
00:11:07,650 --> 00:11:09,903
which will output down there.
218
00:11:11,310 --> 00:11:14,010
With all that done, if we now save this,
219
00:11:14,010 --> 00:11:16,880
if I reload, if I add items to the cart,
220
00:11:16,880 --> 00:11:20,133
that badge on the top, right corner updates.
221
00:11:21,680 --> 00:11:24,760
Now let's make sure we rendered this cart correctly.
222
00:11:24,760 --> 00:11:28,480
And for that, we need to go to the Cart.js file.
223
00:11:28,480 --> 00:11:30,820
There, I have this list of CartItems
224
00:11:30,820 --> 00:11:33,030
and at the moment it's hard-coded.
225
00:11:33,030 --> 00:11:35,450
So again, here, we wanna use Redux instead
226
00:11:35,450 --> 00:11:38,543
and to tap into our Redux managed cart state.
227
00:11:39,600 --> 00:11:41,420
So, since we need data from Redux,
228
00:11:41,420 --> 00:11:43,500
we need to import useSelector
229
00:11:45,290 --> 00:11:48,203
and import that from react-redux,
230
00:11:49,870 --> 00:11:54,557
and then here call useSelector and access state.cart
231
00:11:56,420 --> 00:11:59,329
and then there dive into our items,
232
00:11:59,329 --> 00:12:02,093
because we want those CartItems like this,
233
00:12:03,050 --> 00:12:05,170
and then we can output them here.
234
00:12:05,170 --> 00:12:07,897
We can map our CartItems,
235
00:12:09,910 --> 00:12:12,110
into cart item components
236
00:12:13,160 --> 00:12:17,550
and here that CartItem expects the item prop
237
00:12:17,550 --> 00:12:20,290
which holds the object of this shape.
238
00:12:20,290 --> 00:12:23,680
And the good thing is that in cartSlice.
239
00:12:23,680 --> 00:12:26,350
We already are setting up CartItems
240
00:12:26,350 --> 00:12:29,840
with a certain structure where we do have a price,
241
00:12:29,840 --> 00:12:34,020
and a quantity and a total price and so on.
242
00:12:34,020 --> 00:12:36,150
And therefore we now just need to translate
243
00:12:36,150 --> 00:12:39,340
those properties, which we have in our Redux store
244
00:12:39,340 --> 00:12:43,373
and our Redux state to the properties expected here.
245
00:12:44,460 --> 00:12:46,360
So, we create an item on the fly
246
00:12:46,360 --> 00:12:48,927
which we pass as item to CartItem
247
00:12:48,927 --> 00:12:52,220
and the title should be item.title here.
248
00:12:52,220 --> 00:12:55,530
The quantity should be item.quantity
249
00:12:55,530 --> 00:12:57,720
since in the Redux state
250
00:12:57,720 --> 00:13:00,363
I am using quantity as a key as well,
251
00:13:01,520 --> 00:13:05,200
but I'm not using title as I just see I'm using name.
252
00:13:05,200 --> 00:13:09,520
So, in Carts.js here, we should reference item.name,
253
00:13:09,520 --> 00:13:13,130
since item is the data coming from Redux.
254
00:13:13,130 --> 00:13:17,463
Now the total price will be item dot, let's have a look,
255
00:13:19,120 --> 00:13:21,000
total price.
256
00:13:21,000 --> 00:13:24,163
So, we wanna access item.totalPrice
257
00:13:24,163 --> 00:13:27,853
and the single item, price is item.price.
258
00:13:30,300 --> 00:13:32,090
So, that's now the item which we pass
259
00:13:32,090 --> 00:13:35,933
into CartItem for every item we're getting from Redux here.
260
00:13:39,210 --> 00:13:40,120
Let's see if that works.
261
00:13:40,120 --> 00:13:41,940
If we saved this.
262
00:13:41,940 --> 00:13:44,110
Yeah, I can reload.
263
00:13:44,110 --> 00:13:45,660
Let's see.
264
00:13:45,660 --> 00:13:49,140
I got multiple items here, so that doesn't seem to work.
265
00:13:49,140 --> 00:13:52,670
It doesn't seem to get that we have an existing item.
266
00:13:52,670 --> 00:13:54,680
And I think I know why.
267
00:13:54,680 --> 00:13:56,300
If we have a look at cartSlice,
268
00:13:56,300 --> 00:13:59,310
I'm getting an existing item by comparing the idea
269
00:13:59,310 --> 00:14:02,380
of the stored item to the newItem.id.
270
00:14:02,380 --> 00:14:05,410
The problem with that is that I'm storing the item.id
271
00:14:05,410 --> 00:14:08,500
in the item.id field here.
272
00:14:08,500 --> 00:14:12,080
So, we should just change this to just Id here
273
00:14:12,080 --> 00:14:15,800
so that when we extract the id, we are successful.
274
00:14:15,800 --> 00:14:18,490
And if we do that and reload
275
00:14:18,490 --> 00:14:20,910
if I now add the same item multiple times,
276
00:14:20,910 --> 00:14:22,480
it is grouped together.
277
00:14:22,480 --> 00:14:23,930
So now, this is working
278
00:14:23,930 --> 00:14:27,540
and we have to add a second item to have a second entry.
279
00:14:27,540 --> 00:14:30,190
And then that is also grouped together
280
00:14:30,190 --> 00:14:32,130
if we add more and more items.
281
00:14:32,130 --> 00:14:33,143
So, that's working.
282
00:14:35,070 --> 00:14:37,840
We also showed go to Carts.js
283
00:14:37,840 --> 00:14:41,280
and make sure that when we create multiple CartItems here,
284
00:14:41,280 --> 00:14:44,900
we do add that key again and point at item.id
285
00:14:44,900 --> 00:14:46,563
as a unique identifier.
286
00:14:48,110 --> 00:14:49,940
That has nothing to do with Redux,
287
00:14:49,940 --> 00:14:53,860
but helps React as you learned earlier in the course.
288
00:14:53,860 --> 00:14:55,200
So now we got that,
289
00:14:55,200 --> 00:14:56,930
let's now make sure the minus
290
00:14:56,930 --> 00:15:00,370
and plus buttons in our CartItems work.
291
00:15:00,370 --> 00:15:02,820
And for this, we need to dive into the CartItem
292
00:15:02,820 --> 00:15:05,900
and dispatch actions when they are clicked.
293
00:15:05,900 --> 00:15:07,210
So, you know how that works.
294
00:15:07,210 --> 00:15:12,210
We import useDispatch from react-redux
295
00:15:12,830 --> 00:15:14,930
and we need our cartActions.
296
00:15:14,930 --> 00:15:19,930
So, I'll import cartActions from going up, going up
297
00:15:20,420 --> 00:15:22,313
store/cart-slice.
298
00:15:24,240 --> 00:15:27,720
And then here in CartItem we call useDispatch to get access
299
00:15:27,720 --> 00:15:30,600
to that dispatch function,
300
00:15:30,600 --> 00:15:32,810
and we then add new functions
301
00:15:32,810 --> 00:15:35,680
which will be wired up to these buttons.
302
00:15:35,680 --> 00:15:37,883
Let's say to removeItemHandler,
303
00:15:39,500 --> 00:15:42,863
and then also the addItemHandler.
304
00:15:44,970 --> 00:15:47,402
Now, let's start with the removeItemHandler,
305
00:15:47,402 --> 00:15:50,110
and let's dispatch that remove action.
306
00:15:50,110 --> 00:15:53,320
For this, we need cartActions.removeItemFromCart
307
00:15:54,810 --> 00:15:57,350
and that action wants a payload,
308
00:15:57,350 --> 00:16:00,373
it wants the id as a payload.
309
00:16:01,600 --> 00:16:04,060
So, we should make sure that this is passed on.
310
00:16:04,060 --> 00:16:07,440
And for this, we need to accept the id as a prop
311
00:16:07,440 --> 00:16:11,020
in CartItem and then Cart.js again,
312
00:16:11,020 --> 00:16:14,290
make sure that we pass it as a prop.
313
00:16:14,290 --> 00:16:17,400
So actually here in this item object, which we're creating
314
00:16:17,400 --> 00:16:21,223
I'll add the id field and use item.id.
315
00:16:22,810 --> 00:16:24,180
And now instead of CartItem,
316
00:16:24,180 --> 00:16:27,060
we get this id here and we can now pass this
317
00:16:27,060 --> 00:16:30,253
as a payload to the removeItemFromCart action.
318
00:16:31,670 --> 00:16:36,080
Now, for adding an item, we wanna dispatch cartActions
319
00:16:36,982 --> 00:16:40,680
addItemToCart and execute that.
320
00:16:40,680 --> 00:16:43,630
And here we again, need to pass in that object
321
00:16:43,630 --> 00:16:47,150
which addItemToCart expects this object
322
00:16:47,150 --> 00:16:51,043
which should have an id and a price and a title field.
323
00:16:52,200 --> 00:16:56,150
So back in CartItem, this object will get an id field
324
00:16:56,150 --> 00:16:57,690
with this id.
325
00:16:57,690 --> 00:17:01,310
It will get a title field with that title
326
00:17:01,310 --> 00:17:06,310
and also the price field with that price, like this.
327
00:17:07,700 --> 00:17:11,940
Now we just need to wire up these functions to our buttons.
328
00:17:11,940 --> 00:17:14,550
So, on the first button, the minus button
329
00:17:14,550 --> 00:17:18,200
I'll connect the removeItemHandler to onClick
330
00:17:18,200 --> 00:17:21,797
and on the second button it's the addItemHandler.
331
00:17:23,411 --> 00:17:25,220
And with that if we saved this,
332
00:17:25,220 --> 00:17:28,620
if I now reload again, I can add items,
333
00:17:28,620 --> 00:17:32,070
toggle my cart and add the multiple times.
334
00:17:32,070 --> 00:17:34,070
Also add them with this plus button
335
00:17:34,070 --> 00:17:36,230
and all the remove them with the minus.
336
00:17:36,230 --> 00:17:37,910
And if only one item is left
337
00:17:37,910 --> 00:17:40,343
and I click minus it's removed entirely.
338
00:17:41,380 --> 00:17:45,610
So, this is now working and that's again Redux and Action.
339
00:17:45,610 --> 00:17:46,950
It's nothing new.
340
00:17:46,950 --> 00:17:48,960
It's only what we learned thus far
341
00:17:48,960 --> 00:17:51,860
but therefore it's of course a great practice.
342
00:17:51,860 --> 00:17:55,060
But now in the next lecture, let's add some async code
343
00:17:55,060 --> 00:17:57,080
and let's see how we can deal with that
344
00:17:57,080 --> 00:17:58,623
when working with Redux.
27112
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.