Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,430 --> 00:00:04,500
Now, in a scenario like this.
2
00:00:05,880 --> 00:00:11,400
We have three different states we're managing and they're all kind of related, if you're honest, they're
3
00:00:11,430 --> 00:00:15,690
all related to us interacting with an HTP request.
4
00:00:16,170 --> 00:00:23,290
Our user ingredients change whenever we send the request because we either load of data or we delete
5
00:00:23,370 --> 00:00:24,810
the data or we add a data.
6
00:00:25,500 --> 00:00:30,930
And we're waiting for this request to be done right before we change user ingredients.
7
00:00:30,930 --> 00:00:32,380
Or we might also have an error.
8
00:00:32,490 --> 00:00:35,460
So these free states are actually closely related.
9
00:00:35,550 --> 00:00:37,800
We're managing them kind of independently.
10
00:00:38,130 --> 00:00:44,760
But all the we sometimes updates to at the same time, like here where we set error and said is loading
11
00:00:44,760 --> 00:00:49,740
right off each other thanks to reacts batching mechanism, that's no problem.
12
00:00:49,740 --> 00:00:50,820
It works just fine.
13
00:00:51,420 --> 00:00:55,320
But still, it might be a bit annoying to manage these states independently.
14
00:00:55,860 --> 00:01:01,620
By the way, that would get worse if one of the states would depend on another state, which arguably
15
00:01:01,620 --> 00:01:06,930
kind of is the case already when we set our ingredients because we added a new one, we're depending
16
00:01:06,930 --> 00:01:08,430
on our old ingredients.
17
00:01:08,550 --> 00:01:10,830
It's not really a different state.
18
00:01:10,830 --> 00:01:16,140
We're not depending on loading or error here, but it's older snapshot of the same state.
19
00:01:16,950 --> 00:01:23,760
So in such cases where you depend on the older state or you need to update new state based on maybe
20
00:01:23,760 --> 00:01:31,530
also some other new state of and never state object, then there is a better way than using use state
21
00:01:32,070 --> 00:01:34,260
you can instead call or use.
22
00:01:35,520 --> 00:01:38,980
Use reducer and no built in hook.
23
00:01:39,750 --> 00:01:44,030
Now, if you follow through the redock section, the word reducer already tells you something.
24
00:01:44,040 --> 00:01:50,190
Reducers are functions that take some input and returns an output in the end and use her to use her.
25
00:01:50,320 --> 00:01:56,630
Use a stat to give you a clearly defined way of defining state changes and state updates.
26
00:01:56,640 --> 00:01:59,380
And it will then also managed to stay for you.
27
00:01:59,400 --> 00:02:00,480
So react will do that.
28
00:02:01,980 --> 00:02:07,560
It all starts with you defining a reducer and you typically do that outside of your component so that
29
00:02:07,560 --> 00:02:13,020
this reducer function isn't recreated whenever the component renders, because to reduce her function
30
00:02:13,050 --> 00:02:17,530
oftenest decoupled from what's happening inside your component, actually.
31
00:02:18,360 --> 00:02:18,900
So here.
32
00:02:20,500 --> 00:02:22,840
We can have our ingredient reduced for, let's say.
33
00:02:23,920 --> 00:02:29,080
And will actually bolt to reducers, by the way, but let's start with the ingredient reducer, and
34
00:02:29,080 --> 00:02:30,910
this in the end stores a function.
35
00:02:31,030 --> 00:02:38,230
This function will automatically get to arguments past by react to the state and you could name it state,
36
00:02:38,230 --> 00:02:40,120
but I'll name it current ingredients.
37
00:02:40,930 --> 00:02:47,740
So the ingredients currently stored by react and and action, that action will become important for
38
00:02:47,740 --> 00:02:48,680
updating the state.
39
00:02:49,900 --> 00:02:52,270
Now, you all know that concept of actions.
40
00:02:52,270 --> 00:02:57,190
If you watch the reduc section actionis an object which could have.
41
00:02:57,950 --> 00:03:04,220
A type, and then we can use a switch statement to define different cases for different code, you want
42
00:03:04,220 --> 00:03:06,860
to execute for different types of actions we're getting.
43
00:03:07,460 --> 00:03:11,480
For example, we could have a case to set our ingredients.
44
00:03:12,230 --> 00:03:20,120
We could have another case for adding an ingredient, and we could have a third case for deleting an
45
00:03:20,120 --> 00:03:20,750
ingredient.
46
00:03:21,370 --> 00:03:23,570
Now, these are all just identifiers I come up with.
47
00:03:23,570 --> 00:03:25,280
You can use any identifier you want.
48
00:03:26,490 --> 00:03:31,080
You typically all should have a difficult case here, but we should never reached us, so here, I'll
49
00:03:31,080 --> 00:03:32,880
just throw a new error.
50
00:03:34,570 --> 00:03:38,890
Should not get there because we should actually handle all cases that we can have.
51
00:03:39,740 --> 00:03:44,780
Now, a producer, as I said, needs to return something and will return different things for all these
52
00:03:44,780 --> 00:03:50,540
cases here, we throw an error which also while cancels this function here, we're not returning an
53
00:03:50,540 --> 00:03:55,460
error, but we return something new and that should be our new ingredients.
54
00:03:56,350 --> 00:04:01,510
Now, if you call set, then I want to override my current ingredients with a new list, a new array
55
00:04:01,510 --> 00:04:05,110
of ingredients, and that should be part of the actual object I'm getting.
56
00:04:05,320 --> 00:04:09,790
So there I expect to get an ingredients property, which should be an array of ingredients which will
57
00:04:09,790 --> 00:04:10,990
replace the old state.
58
00:04:11,770 --> 00:04:17,019
Now, in the at case here, we all want to return a new state snapshot.
59
00:04:17,470 --> 00:04:19,510
And our state here is an array.
60
00:04:19,510 --> 00:04:21,370
Right, because ingredients is an array.
61
00:04:21,370 --> 00:04:22,510
So we should return an array.
62
00:04:22,810 --> 00:04:25,920
But here, of course, it should be our old array plus the new item.
63
00:04:26,170 --> 00:04:29,590
So the logic is the same as we have it in our add ingredient handler.
64
00:04:29,600 --> 00:04:33,200
And yet there we copy our old ingredients, then we add a new one.
65
00:04:33,850 --> 00:04:40,450
So here in add, I copy my old ones, which are the current ingredients here, which I get automatically,
66
00:04:40,960 --> 00:04:44,260
and then we add a new item and that has to be part of the action we're getting.
67
00:04:44,680 --> 00:04:50,980
And now it's up to you, whoever you expect to get that all already merged into one object on the on
68
00:04:50,980 --> 00:04:52,690
the action like ingredient.
69
00:04:52,900 --> 00:04:58,150
Or if you got three different properties, you will be the one dispatching these actions later so you
70
00:04:58,150 --> 00:04:59,730
can decide which data is in there.
71
00:04:59,740 --> 00:05:02,320
And here I expect to get my ingredients into action.
72
00:05:04,040 --> 00:05:10,700
Now, in the delete case here, we need to return our updated list of ingredients, so I'll take my
73
00:05:10,700 --> 00:05:16,610
current ingredients and then again use filter, run some logic on every ingredient and compare the ingredient
74
00:05:16,610 --> 00:05:23,570
ID with, let's say, the action I.D. So I expect to have an ID field on the incoming action, which
75
00:05:23,570 --> 00:05:28,070
is the idea of the ingredient that should be deleted and therefore all ingredients.
76
00:05:28,100 --> 00:05:30,350
Where does this not equal should be kept?
77
00:05:30,350 --> 00:05:33,020
The one where it is equal will be dropped from the new list.
78
00:05:33,200 --> 00:05:34,360
The new list is returned.
79
00:05:34,580 --> 00:05:36,980
What we return here replaces the old state.
80
00:05:37,160 --> 00:05:39,700
So that's our producer, the producer function.
81
00:05:39,920 --> 00:05:41,320
That alone doesn't do much.
82
00:05:41,690 --> 00:05:46,700
We now need to initialize it by calling use, reduce her or use it.
83
00:05:46,700 --> 00:05:47,870
Utilize it by calling.
84
00:05:47,870 --> 00:05:51,980
User, user, user, user takes our producer function.
85
00:05:51,990 --> 00:05:58,280
So the ingredient producer in this case here and user user also takes an optional argument, which is
86
00:05:58,280 --> 00:05:59,450
the starting state.
87
00:05:59,810 --> 00:06:01,510
And in our case that's an empty array.
88
00:06:01,520 --> 00:06:06,590
So that's what will be passed in as current ingredients the first timers would use for runs and for
89
00:06:06,590 --> 00:06:07,490
subsequent runs.
90
00:06:07,670 --> 00:06:09,640
Current ingredients will be our current state.
91
00:06:10,040 --> 00:06:15,350
Initially, it's an empty array and user user like use state returns, something that something awls
92
00:06:15,350 --> 00:06:19,880
is an array, but now not with state and set state, but with state.
93
00:06:19,880 --> 00:06:23,090
So our user ingredients.
94
00:06:23,090 --> 00:06:24,660
So we can comment about this.
95
00:06:24,680 --> 00:06:26,900
Use State Coulier user ingredients.
96
00:06:27,080 --> 00:06:31,250
But the second argument is now not a method to set our user ingredients.
97
00:06:31,370 --> 00:06:34,280
Instead, we're doing the setting in our reducer.
98
00:06:34,520 --> 00:06:37,130
Instead, it's a dispatch function.
99
00:06:37,370 --> 00:06:41,240
It's still a function which we can call and you can name whatever you want to name.
100
00:06:41,240 --> 00:06:46,970
Dispatch's just one that makes sense because it's a function which we'll call to dispatch these actions
101
00:06:46,970 --> 00:06:47,360
later.
102
00:06:47,390 --> 00:06:51,830
So where you dispatch these action objects which are then handled by the user.
103
00:06:53,110 --> 00:07:00,040
So I'll temporarily again still import use state so that the area code still works, but let's now utilize
104
00:07:00,040 --> 00:07:05,880
dispatch in the places where we previously call set user ingredients because we can't use that anymore.
105
00:07:06,040 --> 00:07:08,620
We're not managing the user ingredients with use state.
106
00:07:09,160 --> 00:07:14,260
Instead, here we now dispatch for a setting the ingredients and now here you need to dispatch an action.
107
00:07:14,590 --> 00:07:20,120
The action could be anything, could be a string, but typically it's an object and here it's an object.
108
00:07:20,120 --> 00:07:26,020
But we want to have a type property describing what action we want to do and then maybe depending on
109
00:07:26,020 --> 00:07:31,240
which action we're running, some extra data like for setting our ingredients appropriate here.
110
00:07:32,340 --> 00:07:40,260
So here, I'll dispatch an object with a type property type is set here, and of course, this has to
111
00:07:40,260 --> 00:07:43,140
be one of the identifiers you're handling introducer.
112
00:07:44,220 --> 00:07:51,050
So here's the set identifier and then this set action needs ingredients, property to work correctly.
113
00:07:51,390 --> 00:07:56,360
So here I add ingredients and set equal to the filtered ingredients I'm getting.
114
00:07:56,820 --> 00:08:00,810
And with that, we're using this to update our user ingredients.
115
00:08:01,050 --> 00:08:01,920
Hentzen already have.
116
00:08:01,920 --> 00:08:02,480
We saved us.
117
00:08:02,490 --> 00:08:03,030
This would work.
118
00:08:03,030 --> 00:08:08,550
But of course, we got to other places where we previously called set user ingredients like here, where
119
00:08:08,550 --> 00:08:09,660
we add an ingredient.
120
00:08:10,050 --> 00:08:15,130
We now instead call dispatch dispatch an action object where the type is at.
121
00:08:15,150 --> 00:08:19,800
Again, that's the identifier we're using in the reducer.
122
00:08:20,130 --> 00:08:23,610
And there we expect to get a ingredient property, so.
123
00:08:24,480 --> 00:08:31,560
All add ingredient here, an ingredient is constructed as I'm constructing it here, so it's an object
124
00:08:31,560 --> 00:08:36,870
with my ID and with the ingredient data I am getting here as an input to this function.
125
00:08:37,740 --> 00:08:44,700
So now we dispatch this and finally for deleting instead of running this code, we also dispatch.
126
00:08:45,940 --> 00:08:48,790
Action where the type is delete.
127
00:08:50,020 --> 00:08:56,110
Again, because we have the lead type here and there, I expect to get an ID field in the actual object,
128
00:08:56,110 --> 00:08:57,450
you could have multiple fields.
129
00:08:57,460 --> 00:09:00,340
You don't always have to just have type and one hour field.
130
00:09:00,340 --> 00:09:03,260
You can have as many fields in here as you want here.
131
00:09:03,280 --> 00:09:10,780
However, it will be the ID and dad will simply be the well, the ingredient ID I'm getting here as
132
00:09:10,780 --> 00:09:12,790
I input to my remove ingredient handler.
133
00:09:13,120 --> 00:09:14,380
So that's now forwarded.
134
00:09:15,760 --> 00:09:23,530
With that, if we saved us, this works our data loads and if I add, for example, apples that works
135
00:09:24,010 --> 00:09:31,630
and to show that deleting all the works, I'll fix that error in my delete htp request by adding that
136
00:09:31,630 --> 00:09:32,230
-- again.
137
00:09:32,230 --> 00:09:32,990
And Jason.
138
00:09:33,430 --> 00:09:38,700
And now if I click on, let's say, chocolate decis removed and it stays away if we reload.
139
00:09:39,040 --> 00:09:41,140
So that's how we can use use, reduce her.
14302
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.