Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,353 --> 00:00:04,980
Now as kind of a bonus,
2
00:00:04,980 --> 00:00:07,160
you could say to this module
3
00:00:07,160 --> 00:00:11,080
we can also practice working with useReducer again
4
00:00:11,080 --> 00:00:14,230
because what did we learn about useReducer?
5
00:00:14,230 --> 00:00:19,200
When does it shine or when is it worth considering using it?
6
00:00:19,200 --> 00:00:23,020
We learned that it's great to use users, user
7
00:00:23,020 --> 00:00:26,690
or that it's worth a thought to use useReducer
8
00:00:26,690 --> 00:00:28,740
if we need more power.
9
00:00:28,740 --> 00:00:32,040
So if you have a lot of different possible state values
10
00:00:32,040 --> 00:00:36,220
and a lot of complex state updating logic
11
00:00:36,220 --> 00:00:40,426
but also if we have related pieces of state
12
00:00:40,426 --> 00:00:44,730
which are managed in individual states
13
00:00:44,730 --> 00:00:48,710
especially if those states depend on each other.
14
00:00:48,710 --> 00:00:53,300
Now, arguably, that's not really the case here.
15
00:00:53,300 --> 00:00:57,120
We never have a lot of different state values
16
00:00:57,120 --> 00:01:01,600
nor a very complex state updating logic here.
17
00:01:01,600 --> 00:01:05,150
And in addition we do have multiple states
18
00:01:05,150 --> 00:01:07,000
that kind of belong together
19
00:01:07,000 --> 00:01:09,180
the value and the touch state.
20
00:01:09,180 --> 00:01:13,520
They both kind of represent the state of the input element
21
00:01:14,450 --> 00:01:17,240
but they don't really depend on each other.
22
00:01:17,240 --> 00:01:20,940
That would not really be true to state this
23
00:01:20,940 --> 00:01:24,980
nonetheless to practice working with useReducer again,
24
00:01:24,980 --> 00:01:29,980
I will import useReducer here now instead of useState
25
00:01:30,000 --> 00:01:32,210
and now use useReducer for
26
00:01:32,210 --> 00:01:35,343
managing these two state pieces here.
27
00:01:35,343 --> 00:01:38,430
But again, it's not strictly required
28
00:01:38,430 --> 00:01:41,850
it's mainly another practice for useReducer.
29
00:01:43,030 --> 00:01:46,200
So I'll start by adding a reducer function,
30
00:01:46,200 --> 00:01:51,110
input, state reducer function we could say,
31
00:01:51,110 --> 00:01:53,640
and you'll learn that this reducer function
32
00:01:53,640 --> 00:01:56,160
takes two main arguments.
33
00:01:56,160 --> 00:01:59,620
The previous state snapshot, which will be provided
34
00:01:59,620 --> 00:02:03,110
and passed in automatically by React
35
00:02:03,110 --> 00:02:05,680
and an action which will also be passed
36
00:02:05,680 --> 00:02:08,850
into this function automatically by React.
37
00:02:08,850 --> 00:02:11,410
But which is the action you dispatched somewhere
38
00:02:11,410 --> 00:02:13,370
in your code.
39
00:02:13,370 --> 00:02:14,900
And then ultimately you have
40
00:02:14,900 --> 00:02:18,010
to return a new state snapshot here,
41
00:02:18,010 --> 00:02:20,950
and we can return a default state snapshot
42
00:02:20,950 --> 00:02:24,400
which we always return unless we change it in code
43
00:02:24,400 --> 00:02:28,440
we're about to add, and that could contain our value.
44
00:02:28,440 --> 00:02:30,930
So the value for this input
45
00:02:30,930 --> 00:02:33,400
which initially is an empty string
46
00:02:33,400 --> 00:02:35,423
and the is touched state,
47
00:02:37,270 --> 00:02:39,033
which initially is false.
48
00:02:39,960 --> 00:02:41,870
And then here in the use input hook,
49
00:02:41,870 --> 00:02:42,970
we can call useReducer
50
00:02:44,250 --> 00:02:49,030
and pass our input state reducer function to useReducer
51
00:02:49,030 --> 00:02:51,120
and also provide our initial state
52
00:02:51,120 --> 00:02:53,618
which is basically this state here
53
00:02:53,618 --> 00:02:55,880
and hence I'll add the number of constant
54
00:02:56,910 --> 00:03:01,609
initial input state
55
00:03:01,609 --> 00:03:04,790
which simply holds this object.
56
00:03:04,790 --> 00:03:07,480
And I returned this object here
57
00:03:07,480 --> 00:03:11,790
and I also set this here as an initial state.
58
00:03:11,790 --> 00:03:15,163
So the initial input state.
59
00:03:16,913 --> 00:03:20,450
Now useReducer as you learned returns an array
60
00:03:20,450 --> 00:03:23,313
with exactly two elements, just like useState.
61
00:03:24,400 --> 00:03:28,375
And the first element is always the state managed
62
00:03:28,375 --> 00:03:29,903
by the reducer.
63
00:03:30,938 --> 00:03:33,450
So the input state as we could call it.
64
00:03:33,450 --> 00:03:36,670
And the second element is always a dispatched function
65
00:03:36,670 --> 00:03:41,670
which allows you to dispatch actions against that reducer.
66
00:03:41,810 --> 00:03:43,110
So I'll name it dispatch,
67
00:03:43,110 --> 00:03:46,082
but you can of course pick any name you want here.
68
00:03:46,082 --> 00:03:49,440
Now we can get rid of these two states license here now,
69
00:03:49,440 --> 00:03:54,110
and now instead start working with input state and dispatch.
70
00:03:54,110 --> 00:03:58,373
For example, here for validating the value there
71
00:03:58,373 --> 00:04:03,260
we can now use input state dot value.
72
00:04:03,260 --> 00:04:06,371
We know that our input state will have a value property
73
00:04:06,371 --> 00:04:10,540
because that is the structure our state here will have
74
00:04:10,540 --> 00:04:12,883
the state managed by this reducer.
75
00:04:14,020 --> 00:04:16,260
We can also get the touch state from there
76
00:04:16,260 --> 00:04:18,903
input state is touched.
77
00:04:20,660 --> 00:04:24,400
Now when value change handler executes
78
00:04:24,400 --> 00:04:29,360
we wanna dispatch an action against our reducer
79
00:04:29,360 --> 00:04:31,470
and you learn that it's totally up to you
80
00:04:31,470 --> 00:04:35,184
how is such an actual looks like, but it often is an object
81
00:04:35,184 --> 00:04:39,240
with a type property which identifies the action
82
00:04:39,240 --> 00:04:42,740
and here I'll sets type to a string called input
83
00:04:45,330 --> 00:04:47,530
and it can also carry a payload.
84
00:04:47,530 --> 00:04:51,220
And here I'll add a value property to this object
85
00:04:51,220 --> 00:04:54,800
which holds event target value as a value.
86
00:04:54,800 --> 00:04:56,950
And then I can get rid of this line here,
87
00:04:56,950 --> 00:04:59,643
where we set, entered to value.
88
00:04:59,643 --> 00:05:03,560
Now we also wanna dispatch in the end input blur handler
89
00:05:03,560 --> 00:05:06,840
and there we could use the identifier blur
90
00:05:07,710 --> 00:05:10,570
and we can also provide a value here
91
00:05:10,570 --> 00:05:13,270
but we're not actually interested in the value here.
92
00:05:13,270 --> 00:05:14,150
So there instead,
93
00:05:14,150 --> 00:05:17,293
I can also just pass in an action like this.
94
00:05:19,230 --> 00:05:21,130
Now, when we reset
95
00:05:21,130 --> 00:05:25,430
we can dispatch an object where to type is reset.
96
00:05:25,430 --> 00:05:28,063
For example, now when we return,
97
00:05:28,063 --> 00:05:30,156
I wanna return the value
98
00:05:30,156 --> 00:05:34,300
and that would be input state dot value
99
00:05:34,300 --> 00:05:37,183
and data's already it with that we're good here.
100
00:05:38,180 --> 00:05:41,490
So now we just need to handle these free action types
101
00:05:41,490 --> 00:05:45,080
input blur and reset in this reducer.
102
00:05:45,080 --> 00:05:49,660
So we can check if action dot type is equal to input
103
00:05:50,570 --> 00:05:53,570
or if action type is equal to blur
104
00:05:55,770 --> 00:06:00,770
or if action type is equal to reset.
105
00:06:04,040 --> 00:06:06,045
Now, if it is equal to input then
106
00:06:06,045 --> 00:06:09,686
I wanna return a new state object
107
00:06:09,686 --> 00:06:12,586
where I in the end
108
00:06:12,586 --> 00:06:17,586
set value to action dot value
109
00:06:18,270 --> 00:06:21,615
because in the input action case here,
110
00:06:21,615 --> 00:06:25,304
we will have a value property on the action object,
111
00:06:25,304 --> 00:06:28,240
which carries the entered value.
112
00:06:28,240 --> 00:06:30,620
And I wanna set the state.
113
00:06:30,620 --> 00:06:34,470
Now I don't wanna set is touched to true
114
00:06:34,470 --> 00:06:36,300
because whilst we have a keystroke
115
00:06:36,300 --> 00:06:38,830
the user didn't finish typing yet.
116
00:06:38,830 --> 00:06:41,670
So I don't wanna set is touched to true
117
00:06:41,670 --> 00:06:43,540
otherwise we would kind of break to
118
00:06:43,540 --> 00:06:45,890
behavior rebuilt over this module
119
00:06:45,890 --> 00:06:48,730
where we only present error messages
120
00:06:48,730 --> 00:06:51,350
once the user is really done,
121
00:06:51,350 --> 00:06:54,870
hence here, instead I wanna copy the existing state.
122
00:06:54,870 --> 00:06:59,870
So I will set is touched here to state dot is touched
123
00:07:00,050 --> 00:07:03,853
using the previous states is touched value.
124
00:07:05,120 --> 00:07:09,612
Now in the blur case I wanna return a new object as well.
125
00:07:09,612 --> 00:07:12,981
And here I wanna set is touched to true
126
00:07:12,981 --> 00:07:16,410
because that is what we do when the input blurs
127
00:07:16,410 --> 00:07:18,600
it should now be marked as touched
128
00:07:19,640 --> 00:07:23,060
on the other hand here I don't care about the value
129
00:07:23,060 --> 00:07:24,250
we could update it.
130
00:07:24,250 --> 00:07:27,204
We could get it from this event object in
131
00:07:27,204 --> 00:07:29,150
the input blur handler
132
00:07:29,150 --> 00:07:31,080
but we don't really need to do that
133
00:07:31,080 --> 00:07:35,060
since we're updating the value on every keystroke anyways.
134
00:07:35,060 --> 00:07:38,640
So hence here I can set value to state dot value
135
00:07:38,640 --> 00:07:41,153
simply using the existing value.
136
00:07:43,080 --> 00:07:44,760
And if we reset,
137
00:07:44,760 --> 00:07:48,580
I return an object where I said is attached to false
138
00:07:48,580 --> 00:07:51,943
and value back to an empty string to reset this.
139
00:07:53,120 --> 00:07:56,503
And this is now our custom hook using useReducer.
140
00:07:57,940 --> 00:08:00,610
If you now check does again here
141
00:08:00,610 --> 00:08:04,890
you still get the same behavior as before
142
00:08:04,890 --> 00:08:07,840
where we can fill out the form to make it work
143
00:08:09,270 --> 00:08:13,730
and where we still also get errors, if we will have errors.
144
00:08:13,730 --> 00:08:16,500
So that all still works as before.
145
00:08:16,500 --> 00:08:18,990
But now with the useReducer simply as
146
00:08:18,990 --> 00:08:20,893
a little extra exercise.
11529
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.