Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,210 --> 00:00:05,070
So let's now get started with Redux toolkit.
2
00:00:05,070 --> 00:00:07,070
And for that I'll quit my dev server
3
00:00:07,070 --> 00:00:11,157
and then NPM install @reduxjs/toolkit.
4
00:00:13,370 --> 00:00:15,050
That is simply the package name.
5
00:00:15,050 --> 00:00:18,103
You all define this, the official docs.
6
00:00:19,530 --> 00:00:21,870
So we execute this and this will then install
7
00:00:21,870 --> 00:00:25,010
this Redux JS toolkit package.
8
00:00:25,010 --> 00:00:28,360
Now, when you install that you then there after
9
00:00:28,360 --> 00:00:30,820
can also uninstall Redux.
10
00:00:30,820 --> 00:00:32,990
So the Redux library itself
11
00:00:32,990 --> 00:00:37,400
because that is already included in Redux toolkit.
12
00:00:37,400 --> 00:00:40,320
So you could now remove this Redux entry here
13
00:00:40,320 --> 00:00:41,443
from package Json.
14
00:00:43,380 --> 00:00:47,120
Now with it installed we can restart the development server.
15
00:00:47,120 --> 00:00:50,423
And now the question is how we use Redux toolkit.
16
00:00:51,480 --> 00:00:53,840
Well we do use it here in this store folder
17
00:00:53,840 --> 00:00:55,780
in the index JS file
18
00:00:55,780 --> 00:00:59,680
because Redux toolkit simplifies a couple of aspects
19
00:00:59,680 --> 00:01:02,470
of working with Redux.
20
00:01:02,470 --> 00:01:04,970
And let's start with the reducer
21
00:01:04,970 --> 00:01:07,770
and also in directly with the actions.
22
00:01:07,770 --> 00:01:10,420
Here at the top and the index JS file
23
00:01:10,420 --> 00:01:14,890
we can import something from @reduxjs/toolkit.
24
00:01:14,890 --> 00:01:19,513
Ad that's something is the create slice function.
25
00:01:20,650 --> 00:01:24,010
There also is a create reducer function
26
00:01:24,010 --> 00:01:26,200
which would also allow us to create a reducer
27
00:01:26,200 --> 00:01:27,950
with certain enhancements,
28
00:01:27,950 --> 00:01:32,460
but create slice is even more powerful than create reducer.
29
00:01:32,460 --> 00:01:35,623
And it will simplify a couple of aspects in one go.
30
00:01:36,710 --> 00:01:39,000
Now, once we imported it, we can call it,
31
00:01:39,000 --> 00:01:41,760
we can call create slice here,
32
00:01:41,760 --> 00:01:45,280
and I will call it the low my initial state object.
33
00:01:45,280 --> 00:01:49,603
And then create slice once an object as an argument.
34
00:01:50,680 --> 00:01:53,120
Now, what we do with create slice
35
00:01:53,120 --> 00:01:58,120
is we are preparing a slice of our global state.
36
00:01:59,590 --> 00:02:02,270
And when we have different pieces of state
37
00:02:02,270 --> 00:02:04,430
which are not directly related,
38
00:02:04,430 --> 00:02:08,280
let's say an authentication status and the counter status,
39
00:02:08,280 --> 00:02:11,020
we could create different slices
40
00:02:11,020 --> 00:02:13,690
potentially also in different files
41
00:02:13,690 --> 00:02:16,030
to make our code maintainable.
42
00:02:16,030 --> 00:02:18,910
Now here we only have counter related state
43
00:02:18,910 --> 00:02:20,290
and I would say that the counter
44
00:02:20,290 --> 00:02:22,790
and show counter belong kind of together
45
00:02:22,790 --> 00:02:25,780
so I will create one slice for now.
46
00:02:25,780 --> 00:02:28,140
Now every slice needs a name
47
00:02:28,140 --> 00:02:31,880
and identifier of that piece of state so to say.
48
00:02:31,880 --> 00:02:35,820
And here I'll name this counter but the name is up to you.
49
00:02:35,820 --> 00:02:37,750
It doesn't have to be this name here,
50
00:02:37,750 --> 00:02:39,793
it can be any name you want.
51
00:02:41,180 --> 00:02:44,520
Next you need to set up an initial state.
52
00:02:44,520 --> 00:02:48,270
And here I wanna set my initial state equal to that object
53
00:02:48,270 --> 00:02:51,190
or I therefore just point at initial state
54
00:02:51,190 --> 00:02:54,570
so at this constant and use that constant value
55
00:02:54,570 --> 00:02:59,110
as a value or we even use modern JavaScript Syntex,
56
00:02:59,110 --> 00:03:03,300
omit this part and let JavaScript behind the scenes
57
00:03:03,300 --> 00:03:06,590
automatically expanded to this code again.
58
00:03:06,590 --> 00:03:08,630
So with that, we're setting the initial state
59
00:03:08,630 --> 00:03:11,743
of this state slice to this initial state.
60
00:03:12,880 --> 00:03:15,873
And then we also need to add reducers.
61
00:03:17,160 --> 00:03:21,440
Reducers is again, an object, a map you could say,
62
00:03:21,440 --> 00:03:25,120
of all the reducers this slice needs,
63
00:03:25,120 --> 00:03:27,450
this state slice needs.
64
00:03:27,450 --> 00:03:31,420
Now here in this object, you can now simply add methods
65
00:03:31,420 --> 00:03:33,470
with any names of your choice,
66
00:03:33,470 --> 00:03:37,200
though those names will become important later.
67
00:03:37,200 --> 00:03:39,870
And here I'll add an increment method.
68
00:03:39,870 --> 00:03:42,820
I will add a detriment method.
69
00:03:42,820 --> 00:03:45,910
I will add an increase method,
70
00:03:45,910 --> 00:03:50,910
and I will also add my toggle counter method, let's say.
71
00:03:51,980 --> 00:03:56,470
So for methods because I had four different if cases
72
00:03:56,470 --> 00:03:58,823
in my reducer before.
73
00:04:00,690 --> 00:04:02,350
Now, every method here
74
00:04:02,350 --> 00:04:05,660
will then automatically receive the latest state.
75
00:04:05,660 --> 00:04:09,050
These methods will be called for you by Redux,
76
00:04:09,050 --> 00:04:11,670
and they will receive the current state.
77
00:04:11,670 --> 00:04:15,360
Also to the action, and we'll use that in a second,
78
00:04:15,360 --> 00:04:19,029
but actually here we don't need the action
79
00:04:19,029 --> 00:04:23,830
because these methods will automatically be called for you
80
00:04:23,830 --> 00:04:27,070
depending on which action was triggered.
81
00:04:27,070 --> 00:04:30,200
So we don't need to write our own if checks anymore
82
00:04:30,200 --> 00:04:31,570
instead we'll soon be able
83
00:04:31,570 --> 00:04:35,860
to identify these different reducers and dispatch actions
84
00:04:35,860 --> 00:04:39,180
that target these different reducers.
85
00:04:39,180 --> 00:04:42,500
So we now don't have to write our own if checks anymore
86
00:04:42,500 --> 00:04:45,530
which also reduces some boilerplate code
87
00:04:45,530 --> 00:04:47,263
we would have to write otherwise.
88
00:04:48,310 --> 00:04:51,470
Now in these methods here in the reducers map
89
00:04:51,470 --> 00:04:54,970
we now also can do something else than we did before.
90
00:04:54,970 --> 00:04:59,640
Now, here we are allowed to mutate the state.
91
00:04:59,640 --> 00:05:04,110
So here we can set state.counter++ for example,
92
00:05:04,110 --> 00:05:05,363
for incrementing it.
93
00:05:06,790 --> 00:05:08,960
Now this was forbidden before
94
00:05:08,960 --> 00:05:12,060
and I emphasized that it is forbidden.
95
00:05:12,060 --> 00:05:16,370
I also did emphasize it because here it seems to be allowed.
96
00:05:16,370 --> 00:05:19,830
But the important part is the word seems.
97
00:05:19,830 --> 00:05:24,100
We still must not manipulate the existing state
98
00:05:24,100 --> 00:05:27,670
but the good thing is when using Redux toolkit
99
00:05:27,670 --> 00:05:30,410
and its functions like create slice,
100
00:05:30,410 --> 00:05:34,540
we can't accidentally manipulate the existing state.
101
00:05:34,540 --> 00:05:38,760
Because Redux toolkit internally uses another package,
102
00:05:38,760 --> 00:05:42,660
called imgur, which will detect code like this
103
00:05:42,660 --> 00:05:46,920
and which will automatically clone the existing state,
104
00:05:46,920 --> 00:05:50,840
create a new state object, keep all the state
105
00:05:50,840 --> 00:05:54,380
which we're not editing, and override the state
106
00:05:54,380 --> 00:05:58,220
which we are editing in an immutable way.
107
00:05:58,220 --> 00:06:00,950
So we still have immutable code here
108
00:06:00,950 --> 00:06:02,920
even though it doesn't look like it
109
00:06:02,920 --> 00:06:06,830
because of this internally used package
110
00:06:06,830 --> 00:06:09,160
and therefore we as a developer
111
00:06:09,160 --> 00:06:11,850
have a much easier time working with Redux
112
00:06:11,850 --> 00:06:14,680
because we don't have to create a copy manually
113
00:06:14,680 --> 00:06:17,460
and keep all the code we're not changing,
114
00:06:17,460 --> 00:06:20,380
instead, we just change the code we wanna change
115
00:06:20,380 --> 00:06:24,743
and internally it's translated into immutable code.
116
00:06:26,160 --> 00:06:29,617
Therefore in decrement we execute state.counter--
117
00:06:30,970 --> 00:06:33,010
and here for increase
118
00:06:33,010 --> 00:06:35,240
we now need a payload.
119
00:06:35,240 --> 00:06:38,010
We now need extra data.
120
00:06:38,010 --> 00:06:40,000
So how does that work?
121
00:06:40,000 --> 00:06:43,340
Now when using Redux toolkit we of course,
122
00:06:43,340 --> 00:06:47,650
can still have reducers that listen to actions
123
00:06:47,650 --> 00:06:51,210
that have an extra payload, extra data.
124
00:06:51,210 --> 00:06:53,360
Because these were user functions here,
125
00:06:53,360 --> 00:06:55,270
don't just receive the state.
126
00:06:55,270 --> 00:06:58,290
They also still do get the action.
127
00:06:58,290 --> 00:07:02,200
We just don't need to accept it in the other two reducers
128
00:07:02,200 --> 00:07:03,960
because we don't need to do anything
129
00:07:03,960 --> 00:07:05,930
with the action in there.
130
00:07:05,930 --> 00:07:08,040
But now here if we need some data
131
00:07:08,040 --> 00:07:10,020
that's attached to the action,
132
00:07:10,020 --> 00:07:12,950
then we can still accept it as a parameter
133
00:07:12,950 --> 00:07:17,360
and use it in the reducer function in the reducer method.
134
00:07:17,360 --> 00:07:19,460
So they are for now I can set state counter
135
00:07:19,460 --> 00:07:24,460
equal to state counter plus action.amount.
136
00:07:24,970 --> 00:07:28,713
So basically what I did down here as well.
137
00:07:30,210 --> 00:07:34,020
Now again, in this mutable looking way,
138
00:07:34,020 --> 00:07:36,663
which isn't really mutating the state.
139
00:07:38,000 --> 00:07:40,920
Now for a toggle counter we don't need the actual payload
140
00:07:40,920 --> 00:07:42,690
here we just get the state,
141
00:07:42,690 --> 00:07:47,500
and set state.show counter equal to not state.show counter
142
00:07:47,500 --> 00:07:50,030
to invert this value.
143
00:07:50,030 --> 00:07:54,870
So now we created this slice and writing that code
144
00:07:54,870 --> 00:07:57,260
is certainly quite convenient and shorter
145
00:07:57,260 --> 00:07:59,360
than what we had to do down there.
146
00:07:59,360 --> 00:08:03,620
But how do we now make our store aware of that slice?
147
00:08:03,620 --> 00:08:05,730
How do we use that slice?
148
00:08:05,730 --> 00:08:10,023
And how do we then dispatch actions against this slice?
11848
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.