Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,170 --> 00:00:03,860
So I hope I could explain
2
00:00:03,860 --> 00:00:06,080
the problem set we're dealing with here
3
00:00:06,080 --> 00:00:07,640
in the last lecture
4
00:00:07,640 --> 00:00:10,320
and it's not uncommon problem set
5
00:00:10,320 --> 00:00:11,580
that you have a backend
6
00:00:11,580 --> 00:00:13,180
which might not be doing
7
00:00:13,180 --> 00:00:15,460
all the work you want it to do it
8
00:00:15,460 --> 00:00:16,770
and therefore we'll now have
9
00:00:16,770 --> 00:00:19,590
to find a way around that problem.
10
00:00:19,590 --> 00:00:20,470
As I mentioned
11
00:00:20,470 --> 00:00:22,790
we can send our HTTP request here
12
00:00:22,790 --> 00:00:24,080
in the reducer
13
00:00:24,080 --> 00:00:25,300
but that of course then means
14
00:00:25,300 --> 00:00:27,220
that we need to find a different way
15
00:00:27,220 --> 00:00:29,820
and here these two main options
16
00:00:29,820 --> 00:00:32,150
where we can run our async code
17
00:00:32,150 --> 00:00:33,670
become important again.
18
00:00:33,670 --> 00:00:35,380
We can run it into component
19
00:00:35,380 --> 00:00:37,440
or in an action creator.
20
00:00:37,440 --> 00:00:38,273
Now as mentioned,
21
00:00:38,273 --> 00:00:40,360
let's start with the component
22
00:00:40,360 --> 00:00:42,100
and here it's the product item
23
00:00:42,100 --> 00:00:43,170
where we have this
24
00:00:43,170 --> 00:00:44,640
add to cart handler,
25
00:00:44,640 --> 00:00:46,133
where we send a request.
26
00:00:47,000 --> 00:00:48,610
Now, what we can do here
27
00:00:48,610 --> 00:00:52,360
is we can also use useselector
28
00:00:52,360 --> 00:00:54,170
from react redux
29
00:00:54,170 --> 00:00:56,130
and get our current cart
30
00:00:56,130 --> 00:00:58,340
before it's updated
31
00:00:58,340 --> 00:01:01,040
then do all that transformation
32
00:01:01,040 --> 00:01:02,560
which we do in the reducer
33
00:01:02,560 --> 00:01:04,590
ends out of product item
34
00:01:04,590 --> 00:01:06,770
without mutating the state though,
35
00:01:06,770 --> 00:01:07,890
that's important.
36
00:01:07,890 --> 00:01:09,040
We'll need to take care
37
00:01:09,040 --> 00:01:10,960
that we don't do that there
38
00:01:10,960 --> 00:01:12,800
and then we send the request
39
00:01:13,800 --> 00:01:15,280
and here's how that code
40
00:01:15,280 --> 00:01:16,870
could look like.
41
00:01:16,870 --> 00:01:18,560
I did not write this code
42
00:01:18,560 --> 00:01:19,530
together with you
43
00:01:19,530 --> 00:01:21,030
because this will not be
44
00:01:21,030 --> 00:01:22,840
the final code we'll use
45
00:01:22,840 --> 00:01:24,940
because it has problems.
46
00:01:24,940 --> 00:01:26,790
You will find it attached though
47
00:01:26,790 --> 00:01:29,350
you'll find this code snapshot attached
48
00:01:29,350 --> 00:01:30,474
so that you can also
49
00:01:30,474 --> 00:01:32,940
run it in your own project.
50
00:01:32,940 --> 00:01:34,100
What did I do?
51
00:01:34,100 --> 00:01:36,290
I worked on add to cart handler
52
00:01:36,290 --> 00:01:37,830
in the product item
53
00:01:37,830 --> 00:01:39,310
and I, first of all used
54
00:01:39,310 --> 00:01:41,220
useselector from react redux
55
00:01:41,220 --> 00:01:43,910
to select my cart from there,
56
00:01:43,910 --> 00:01:45,190
the entire cart.
57
00:01:45,190 --> 00:01:47,780
So this cart stayed object
58
00:01:47,780 --> 00:01:50,270
with items and total quantity
59
00:01:50,270 --> 00:01:53,120
and then in add to cart handler,
60
00:01:53,120 --> 00:01:55,980
I create my own new total quantity.
61
00:01:55,980 --> 00:01:58,990
I don't change it in the existing state
62
00:01:58,990 --> 00:02:00,460
because we must not
63
00:02:00,460 --> 00:02:02,650
mutate the state here
64
00:02:02,650 --> 00:02:04,480
and that's important.
65
00:02:04,480 --> 00:02:08,100
We can write this mutating code here
66
00:02:08,100 --> 00:02:09,830
inside off the reducer function
67
00:02:09,830 --> 00:02:11,370
in our slice
68
00:02:11,370 --> 00:02:12,830
because Redux toolkit
69
00:02:12,830 --> 00:02:15,376
has this internal transformation
70
00:02:15,376 --> 00:02:17,610
for changing our code
71
00:02:17,610 --> 00:02:20,480
such that it doesn't mutate the state
72
00:02:20,480 --> 00:02:22,114
but that only applies
73
00:02:22,114 --> 00:02:25,550
inside of those reducer methods.
74
00:02:25,550 --> 00:02:27,010
In product item
75
00:02:27,010 --> 00:02:28,880
so in a regular component,
76
00:02:28,880 --> 00:02:30,700
that's not the case
77
00:02:30,700 --> 00:02:32,795
and if here I would set
78
00:02:32,795 --> 00:02:34,510
cart total quantity
79
00:02:34,510 --> 00:02:37,370
equal to cart total quantity plus one
80
00:02:37,370 --> 00:02:39,340
then I would change
81
00:02:39,340 --> 00:02:42,060
a JavaScript object in memory
82
00:02:42,060 --> 00:02:44,960
which is all the part of the Redux store
83
00:02:44,960 --> 00:02:47,710
without making Redux aware of it
84
00:02:47,710 --> 00:02:49,530
because I would be changing it
85
00:02:49,530 --> 00:02:51,870
outside of a reducer function,
86
00:02:51,870 --> 00:02:52,950
which is horrible
87
00:02:52,950 --> 00:02:55,060
which you must avoid.
88
00:02:55,060 --> 00:02:56,130
So that line,
89
00:02:56,130 --> 00:02:57,270
which I selected here
90
00:02:57,270 --> 00:02:59,310
would be super bad code.
91
00:02:59,310 --> 00:03:01,990
You must never mutate Redux state
92
00:03:01,990 --> 00:03:04,090
and especially don't do it
93
00:03:04,090 --> 00:03:05,413
outside of a reducer.
94
00:03:06,320 --> 00:03:07,370
That's why instead
95
00:03:07,370 --> 00:03:08,970
I create a new constant
96
00:03:08,970 --> 00:03:11,100
which has the updated quantity
97
00:03:11,100 --> 00:03:12,720
without changing the quantity
98
00:03:12,720 --> 00:03:14,760
in the Redux store yet
99
00:03:14,760 --> 00:03:16,540
and then I do similar things
100
00:03:16,540 --> 00:03:18,560
for updating my items.
101
00:03:18,560 --> 00:03:21,080
I create an updated items constant
102
00:03:21,080 --> 00:03:23,410
where I copied the items in the cart
103
00:03:23,410 --> 00:03:25,200
with the slice method
104
00:03:25,200 --> 00:03:27,660
that creates a brand new array
105
00:03:27,660 --> 00:03:29,210
with the existing objects
106
00:03:29,210 --> 00:03:30,483
but a new array.
107
00:03:31,470 --> 00:03:33,920
Then I get hold of the existing item
108
00:03:33,920 --> 00:03:37,650
by identifying it in my copied items.
109
00:03:37,650 --> 00:03:38,830
That item, however,
110
00:03:38,830 --> 00:03:41,210
will still be an object in memory
111
00:03:41,210 --> 00:03:43,380
which is part of the Redux store
112
00:03:43,380 --> 00:03:44,420
because objects
113
00:03:44,420 --> 00:03:47,250
are reference values in JavaScript.
114
00:03:47,250 --> 00:03:49,010
So I copy that object
115
00:03:49,010 --> 00:03:51,580
into a new object as well.
116
00:03:51,580 --> 00:03:52,990
So that updated item
117
00:03:52,990 --> 00:03:56,100
is a brand new object in memory
118
00:03:56,100 --> 00:03:58,280
and then I can update properties
119
00:03:58,280 --> 00:04:00,160
off that object
120
00:04:00,160 --> 00:04:03,760
without manipulating my Redux store.
121
00:04:03,760 --> 00:04:05,930
If I would be updating existing item,
122
00:04:05,930 --> 00:04:08,570
I would be manipulating my Redux store
123
00:04:08,570 --> 00:04:11,570
not if I create a copy first though
124
00:04:11,570 --> 00:04:13,410
and then I find the index
125
00:04:13,410 --> 00:04:14,990
of that existing item
126
00:04:14,990 --> 00:04:16,990
and I replace the current item
127
00:04:16,990 --> 00:04:19,481
in my cart with the updated item
128
00:04:19,481 --> 00:04:22,120
or if we didn't have the item
129
00:04:22,120 --> 00:04:23,710
as part of the cart before
130
00:04:23,710 --> 00:04:25,920
I push a brand new object
131
00:04:25,920 --> 00:04:28,590
to my updated items array
132
00:04:28,590 --> 00:04:30,730
and then I'd arrive my new cart
133
00:04:30,730 --> 00:04:32,440
by creating a new object
134
00:04:32,440 --> 00:04:34,130
where I said total quantity
135
00:04:34,130 --> 00:04:36,770
to that new total quantity up there
136
00:04:36,770 --> 00:04:37,761
and where I said
137
00:04:37,761 --> 00:04:41,330
items equal to my updated items
138
00:04:41,330 --> 00:04:43,890
and then I dispatch a new action
139
00:04:43,890 --> 00:04:44,723
because I added
140
00:04:44,723 --> 00:04:47,230
a new reducer in the store,
141
00:04:47,230 --> 00:04:49,340
the replace cart reducer.
142
00:04:49,340 --> 00:04:51,280
I added that off screen
143
00:04:51,280 --> 00:04:52,840
and that simply
144
00:04:52,840 --> 00:04:54,830
gets the new total quantity
145
00:04:54,830 --> 00:04:55,870
and the new items
146
00:04:55,870 --> 00:04:58,120
from the payload and overrides it
147
00:04:58,120 --> 00:05:00,170
in the Redux store
148
00:05:00,170 --> 00:05:01,380
and therefore the payload
149
00:05:01,380 --> 00:05:03,400
which I dispatch is an object
150
00:05:03,400 --> 00:05:04,610
with a total quantity
151
00:05:04,610 --> 00:05:05,600
and an items key
152
00:05:05,600 --> 00:05:08,630
and that's what I create here
153
00:05:08,630 --> 00:05:10,800
and what I then dispatch here
154
00:05:10,800 --> 00:05:11,880
and I'm not sending
155
00:05:11,880 --> 00:05:14,070
a HTTP request yet by the way
156
00:05:14,070 --> 00:05:17,470
if I save that with the old action
157
00:05:17,470 --> 00:05:18,460
which we dispatched here,
158
00:05:18,460 --> 00:05:19,754
I commented out,
159
00:05:19,754 --> 00:05:21,920
if I go back to my application
160
00:05:21,920 --> 00:05:23,090
and I reload
161
00:05:23,090 --> 00:05:24,237
I can still add items
162
00:05:24,237 --> 00:05:26,160
to the cart as before
163
00:05:26,160 --> 00:05:27,803
and it works as before.
164
00:05:29,220 --> 00:05:31,080
Now I did not change the logic
165
00:05:31,080 --> 00:05:32,660
that runs when I click the plus
166
00:05:32,660 --> 00:05:34,170
and minus buttons.
167
00:05:34,170 --> 00:05:35,180
Now what's the problem
168
00:05:35,180 --> 00:05:37,790
with this approach though?
169
00:05:37,790 --> 00:05:38,890
The problem is,
170
00:05:38,890 --> 00:05:40,130
that if we would use this
171
00:05:40,130 --> 00:05:42,800
in all the parts of our application,
172
00:05:42,800 --> 00:05:45,240
where we need to update the cart.
173
00:05:45,240 --> 00:05:46,720
So if we would also use it
174
00:05:46,720 --> 00:05:49,065
instead of cart item to be precise
175
00:05:49,065 --> 00:05:52,300
then we would need to copy
176
00:05:52,300 --> 00:05:53,870
all that logic here
177
00:05:53,870 --> 00:05:55,660
which I added to this component
178
00:05:55,660 --> 00:05:58,360
to the cart item component as well
179
00:05:58,360 --> 00:06:01,400
or we outsource it into an extra file
180
00:06:01,400 --> 00:06:02,760
which exports a function,
181
00:06:02,760 --> 00:06:04,350
which does this, maybe.
182
00:06:04,350 --> 00:06:05,220
So then we don't have
183
00:06:05,220 --> 00:06:06,570
to code duplication
184
00:06:06,570 --> 00:06:09,470
but still we'll have another problem.
185
00:06:09,470 --> 00:06:11,498
We do the data transformation
186
00:06:11,498 --> 00:06:13,600
in some helper function
187
00:06:13,600 --> 00:06:15,060
and in the end directly
188
00:06:15,060 --> 00:06:16,580
in our components
189
00:06:16,580 --> 00:06:18,760
we don't do the transformation
190
00:06:18,760 --> 00:06:20,520
in our reducers.
191
00:06:20,520 --> 00:06:22,340
We would be able to get rid of
192
00:06:22,340 --> 00:06:23,550
add item to cart
193
00:06:23,550 --> 00:06:26,090
if we used this replace cart approach
194
00:06:26,090 --> 00:06:28,150
in all the places in the application
195
00:06:28,150 --> 00:06:29,110
and that means
196
00:06:29,110 --> 00:06:30,970
that our redux reducers
197
00:06:30,970 --> 00:06:32,890
wouldn't do a lot of work.
198
00:06:32,890 --> 00:06:34,570
They'd just get some data
199
00:06:34,570 --> 00:06:35,799
and store it.
200
00:06:35,799 --> 00:06:37,520
That can be fine
201
00:06:37,520 --> 00:06:39,330
and if that's your personal preference
202
00:06:39,330 --> 00:06:40,979
that's not necessarily bad
203
00:06:40,979 --> 00:06:43,439
but it's not the main idea
204
00:06:43,439 --> 00:06:45,710
behind using Redux
205
00:06:45,710 --> 00:06:47,940
because when it comes to the question
206
00:06:47,940 --> 00:06:49,740
of where to put our code,
207
00:06:49,740 --> 00:06:50,930
we often have the choice
208
00:06:50,930 --> 00:06:54,580
between fat reducers, fat components
209
00:06:54,580 --> 00:06:56,550
or fat actions.
210
00:06:56,550 --> 00:06:57,700
So when we consider
211
00:06:57,700 --> 00:07:00,510
where to put our logic, our code
212
00:07:00,510 --> 00:07:02,010
then we have to differentiate
213
00:07:02,010 --> 00:07:03,160
between synchronous,
214
00:07:03,160 --> 00:07:05,090
side-effect free code
215
00:07:05,090 --> 00:07:07,020
and code with side effects
216
00:07:07,020 --> 00:07:09,600
or codes that is asynchronous
217
00:07:09,600 --> 00:07:10,500
and that code,
218
00:07:10,500 --> 00:07:13,230
which I provided to you in product item
219
00:07:13,230 --> 00:07:15,620
at the moment is side effect free
220
00:07:15,620 --> 00:07:16,490
we're not sending
221
00:07:16,490 --> 00:07:18,550
that HTTP request yet
222
00:07:18,550 --> 00:07:20,600
deliberately because I wanna focus
223
00:07:20,600 --> 00:07:21,750
on this other problem
224
00:07:21,750 --> 00:07:23,620
we're currently talking about.
225
00:07:23,620 --> 00:07:24,920
All this code here
226
00:07:24,920 --> 00:07:26,660
just transforms data.
227
00:07:26,660 --> 00:07:27,810
It's asynchronous code
228
00:07:27,810 --> 00:07:29,810
and side effect free.
229
00:07:29,810 --> 00:07:31,010
Now in such a case
230
00:07:31,010 --> 00:07:32,780
if we're dealing with synchronous
231
00:07:32,780 --> 00:07:34,750
side-effect free code.
232
00:07:34,750 --> 00:07:35,720
So if we basically
233
00:07:35,720 --> 00:07:37,690
just have some data transformation
234
00:07:37,690 --> 00:07:38,980
so we're on the left side
235
00:07:38,980 --> 00:07:40,090
of the slide
236
00:07:40,090 --> 00:07:41,790
then you typically
237
00:07:41,790 --> 00:07:43,733
should prefer reducers.
238
00:07:44,570 --> 00:07:46,010
Now, if you personally
239
00:07:46,010 --> 00:07:46,998
have a different opinion
240
00:07:46,998 --> 00:07:48,900
if you like having your code
241
00:07:48,900 --> 00:07:49,910
in the component
242
00:07:49,910 --> 00:07:51,570
that of course is fine
243
00:07:51,570 --> 00:07:54,080
but generally it is considered
244
00:07:54,080 --> 00:07:56,477
a bit better to prefer reducers
245
00:07:56,477 --> 00:07:59,100
and a wide action creators
246
00:07:59,100 --> 00:08:00,990
or components for that.
247
00:08:00,990 --> 00:08:02,190
Now we still haven't had
248
00:08:02,190 --> 00:08:04,120
a closer look at action creators.
249
00:08:04,120 --> 00:08:05,330
We will soon
250
00:08:05,330 --> 00:08:07,110
but we did definitely work a lot
251
00:08:07,110 --> 00:08:08,380
with components
252
00:08:08,380 --> 00:08:10,170
and you wanna avoid putting
253
00:08:10,170 --> 00:08:12,440
your data transformation code there
254
00:08:12,440 --> 00:08:14,450
when working with Redux.
255
00:08:14,450 --> 00:08:15,580
It would be different
256
00:08:15,580 --> 00:08:17,070
for asynchronous code
257
00:08:17,070 --> 00:08:19,290
or code with side effects.
258
00:08:19,290 --> 00:08:20,870
There you should prefer
259
00:08:20,870 --> 00:08:22,740
action creators or components
260
00:08:22,740 --> 00:08:23,840
and you absolutely
261
00:08:23,840 --> 00:08:26,410
must never use reducers.
262
00:08:26,410 --> 00:08:27,610
So therefore at the moment
263
00:08:27,610 --> 00:08:28,730
we have a problem.
264
00:08:28,730 --> 00:08:30,790
We have sub optimal code
265
00:08:30,790 --> 00:08:32,520
because we are performing
266
00:08:32,520 --> 00:08:33,760
the data transformation
267
00:08:33,760 --> 00:08:34,850
in the component
268
00:08:34,850 --> 00:08:37,299
and not inside of the reducer
269
00:08:37,299 --> 00:08:39,559
if we rely on replace cart
270
00:08:39,559 --> 00:08:41,750
and that is sub optimal
271
00:08:41,750 --> 00:08:42,679
that's the reason why
272
00:08:42,679 --> 00:08:44,440
we didn't write this code together
273
00:08:44,440 --> 00:08:47,020
because I don't wanna keep that code here
274
00:08:47,020 --> 00:08:48,090
but what would be
275
00:08:48,090 --> 00:08:50,010
a better way of doing it then?
276
00:08:50,010 --> 00:08:52,200
Because we need to prepare it
277
00:08:52,200 --> 00:08:54,290
before we send it to Firebase
278
00:08:54,290 --> 00:08:56,140
because we can send the request
279
00:08:56,140 --> 00:08:57,603
from inside the reducer.
18157
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.