Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,320 --> 00:00:06,260
So we did now translate our Redux-only,
2
00:00:06,260 --> 00:00:08,560
non-React example
3
00:00:08,560 --> 00:00:10,570
where we also use the counter
4
00:00:10,570 --> 00:00:12,550
to this React application
5
00:00:12,550 --> 00:00:17,550
so that there we also manage this counter state with Redux.
6
00:00:18,280 --> 00:00:21,150
And we actually do more than what we did initially
7
00:00:21,150 --> 00:00:25,930
in this module when we just got started with Redux.
8
00:00:25,930 --> 00:00:28,180
Now, in this starting project,
9
00:00:28,180 --> 00:00:30,070
which I provided to you,
10
00:00:30,070 --> 00:00:32,940
we got a couple of other components as well,
11
00:00:32,940 --> 00:00:35,170
not just a counter.
12
00:00:35,170 --> 00:00:37,700
We get a couple of other components as well
13
00:00:37,700 --> 00:00:40,900
because there's more I wanna practice
14
00:00:40,900 --> 00:00:43,960
and teach you when it comes to Redux.
15
00:00:43,960 --> 00:00:45,340
And therefore, it's now time
16
00:00:45,340 --> 00:00:48,500
to use some of these other components.
17
00:00:48,500 --> 00:00:52,470
In the App.js file, in this App component,
18
00:00:52,470 --> 00:00:56,350
let's now return more than just the counter.
19
00:00:56,350 --> 00:01:00,880
Let's add a fragment imported from React.
20
00:01:00,880 --> 00:01:03,130
This built-in Fragment component
21
00:01:03,130 --> 00:01:07,340
so that we can have a couple of adjacent JSX element
22
00:01:07,340 --> 00:01:11,360
and let's also add our Header component here.
23
00:01:11,360 --> 00:01:12,193
And for this, we need
24
00:01:12,193 --> 00:01:16,433
to import Header from ./components/Header.
25
00:01:17,610 --> 00:01:22,510
And let's also add the Auth component here.
26
00:01:22,510 --> 00:01:27,510
And for this import Auth from ./components/Auth.
27
00:01:29,620 --> 00:01:31,510
Now, if we do that,
28
00:01:31,510 --> 00:01:35,220
we have this little demo application.
29
00:01:35,220 --> 00:01:37,180
We still have the counter down there
30
00:01:37,180 --> 00:01:38,850
and we could also remove it,
31
00:01:38,850 --> 00:01:41,930
it's not related to this mini demo at all.
32
00:01:41,930 --> 00:01:43,220
But I will leave it there
33
00:01:43,220 --> 00:01:46,410
so that we still have the Redux state
34
00:01:46,410 --> 00:01:50,400
for the counter and now we're also going to add state
35
00:01:50,400 --> 00:01:53,723
for this demo application but which state?
36
00:01:54,840 --> 00:01:59,680
Well, here I would like to make this login form work.
37
00:01:59,680 --> 00:02:03,560
Not really, we won't really add authentication here.
38
00:02:03,560 --> 00:02:06,630
We do this in a separate course section
39
00:02:06,630 --> 00:02:10,580
because there's more to it than a little bit of Redux usage
40
00:02:10,580 --> 00:02:13,873
but I wanna make sure that when we click Login,
41
00:02:14,720 --> 00:02:17,910
we do switch into some login mode
42
00:02:17,910 --> 00:02:20,620
and for example, what we see here
43
00:02:20,620 --> 00:02:23,540
in the navigation bar changes.
44
00:02:23,540 --> 00:02:26,070
These items and the logout button
45
00:02:26,070 --> 00:02:31,070
should only be displayed if we are logged in in Redux
46
00:02:31,680 --> 00:02:36,130
and I also wanna swap this login field here,
47
00:02:36,130 --> 00:02:39,780
this login form for another component,
48
00:02:39,780 --> 00:02:43,933
the UserProfile component which has some dummy output.
49
00:02:44,850 --> 00:02:48,190
So we have a brand new state to manage.
50
00:02:48,190 --> 00:02:50,490
And unlike the counter state,
51
00:02:50,490 --> 00:02:53,130
which was just a basic example,
52
00:02:53,130 --> 00:02:55,540
the authentication state
53
00:02:55,540 --> 00:02:57,540
and the answer to the question
54
00:02:57,540 --> 00:03:00,240
whether the user is logged in or not
55
00:03:00,240 --> 00:03:02,870
is indeed not just local state,
56
00:03:02,870 --> 00:03:06,470
which matters to one specific component
57
00:03:06,470 --> 00:03:09,130
but it is application-wide state,
58
00:03:09,130 --> 00:03:13,200
which matters to a lot of components in the application.
59
00:03:13,200 --> 00:03:14,680
It matters to the Header,
60
00:03:14,680 --> 00:03:16,480
it matters to the Auth component,
61
00:03:16,480 --> 00:03:19,693
it matters to the UserProfile component in the end.
62
00:03:20,890 --> 00:03:25,090
So therefore, this is the user authenticated state
63
00:03:25,090 --> 00:03:27,730
is a perfect example for a state
64
00:03:27,730 --> 00:03:31,120
that we could manage with React context
65
00:03:31,120 --> 00:03:35,130
or since this section is about Redux, with Redux.
66
00:03:35,130 --> 00:03:37,380
And that's therefore what I wanna do now.
67
00:03:37,380 --> 00:03:40,510
I wanna make sure that when we click the Login button,
68
00:03:40,510 --> 00:03:44,100
we set the user to authenticated.
69
00:03:44,100 --> 00:03:46,030
If we click the Logout button,
70
00:03:46,030 --> 00:03:49,940
I wanna set the user to not authenticated.
71
00:03:49,940 --> 00:03:52,530
And for this, in our store here,
72
00:03:52,530 --> 00:03:54,980
we can add a brand new state,
73
00:03:54,980 --> 00:03:57,003
a brand new piece of data.
74
00:03:58,630 --> 00:03:59,530
Now, the question
75
00:03:59,530 --> 00:04:04,370
is where we should add our authentication data.
76
00:04:04,370 --> 00:04:07,320
We do have this slice, which we created here,
77
00:04:07,320 --> 00:04:09,290
this counter slice
78
00:04:09,290 --> 00:04:10,960
and in there, we manage the counter
79
00:04:10,960 --> 00:04:13,223
and the showCounter state.
80
00:04:14,070 --> 00:04:17,269
We could, of course, also add a new property
81
00:04:17,269 --> 00:04:19,120
to our state here.
82
00:04:19,120 --> 00:04:23,860
Let's say the isAuthenticated property
83
00:04:23,860 --> 00:04:25,830
and set this to false
84
00:04:25,830 --> 00:04:30,370
and then add a new reducer, login, for example,
85
00:04:30,370 --> 00:04:32,090
a new reducer method,
86
00:04:32,090 --> 00:04:36,000
and in here, we then set is isAuthenticated to true.
87
00:04:36,000 --> 00:04:37,710
We could do this
88
00:04:37,710 --> 00:04:40,270
but logically it makes no sense.
89
00:04:40,270 --> 00:04:43,140
The authentication status has nothing
90
00:04:43,140 --> 00:04:44,830
to do with the counter.
91
00:04:44,830 --> 00:04:47,220
Whilst it would technically work,
92
00:04:47,220 --> 00:04:52,110
in programming we typically wanna separate our concerns.
93
00:04:52,110 --> 00:04:55,880
We wanna make sure that this slice really focuses
94
00:04:55,880 --> 00:05:00,690
on the counter-related state and actions.
95
00:05:00,690 --> 00:05:04,160
And we should create a brand new slice
96
00:05:04,160 --> 00:05:06,703
for the authentication state.
97
00:05:07,600 --> 00:05:09,780
And that's, therefore, what I'll do.
98
00:05:09,780 --> 00:05:12,060
I'll rename this initialState up here
99
00:05:12,060 --> 00:05:14,280
to the initialCounterState
100
00:05:15,450 --> 00:05:18,360
because we will soon have more than one initialState
101
00:05:19,700 --> 00:05:23,590
and therefore, I set the initialState property in this slice
102
00:05:23,590 --> 00:05:27,420
to the value stored in initialCounterState.
103
00:05:27,420 --> 00:05:29,930
And then we can add a new slice
104
00:05:29,930 --> 00:05:32,720
below the other slice,
105
00:05:32,720 --> 00:05:36,110
though the exact position does not matter.
106
00:05:36,110 --> 00:05:38,822
But we can call createSlice again
107
00:05:38,822 --> 00:05:40,720
to create another slice
108
00:05:40,720 --> 00:05:44,400
and this slice also, of course, needs an object
109
00:05:44,400 --> 00:05:47,860
to be configured, just as our first slice.
110
00:05:47,860 --> 00:05:50,880
This slice will be configured in exactly the same way
111
00:05:50,880 --> 00:05:53,330
just with different values.
112
00:05:53,330 --> 00:05:54,710
So we add a name here
113
00:05:54,710 --> 00:05:58,810
and set this to auth, for example,
114
00:05:58,810 --> 00:06:02,500
or authentication, whatever you want.
115
00:06:02,500 --> 00:06:06,420
And we also wanna assign some initialState here.
116
00:06:06,420 --> 00:06:08,780
Now, we could create this on the fly here
117
00:06:08,780 --> 00:06:10,880
or again create a separate constant,
118
00:06:10,880 --> 00:06:12,703
which holds this initial state
119
00:06:12,703 --> 00:06:14,500
and that's what I'll do here.
120
00:06:14,500 --> 00:06:16,853
I'll add a const initialAuthState,
121
00:06:18,770 --> 00:06:20,960
which again let's say is an object
122
00:06:20,960 --> 00:06:24,320
where we have the isAuthenticated property,
123
00:06:24,320 --> 00:06:27,110
which initially is set to false.
124
00:06:27,110 --> 00:06:29,080
And then here I set initialState equal
125
00:06:29,080 --> 00:06:31,493
to this initialAuthState value.
126
00:06:32,580 --> 00:06:35,960
And then we need to register our reducers.
127
00:06:35,960 --> 00:06:40,180
These reducer methods, which can change this state.
128
00:06:40,180 --> 00:06:43,890
And here I think two methods make sense.
129
00:06:43,890 --> 00:06:48,210
A login method for well, logging the user in.
130
00:06:48,210 --> 00:06:52,050
And a logout method for logging the user out.
131
00:06:52,050 --> 00:06:55,450
In both methods, we'll receive the current state
132
00:06:55,450 --> 00:07:00,400
as an argument automatically provided by Redux
133
00:07:00,400 --> 00:07:03,920
and we can then mutate this state,
134
00:07:03,920 --> 00:07:05,870
even though we technically shouldn't
135
00:07:05,870 --> 00:07:08,090
but as I explained, we can do it here
136
00:07:08,090 --> 00:07:09,700
because under the hood,
137
00:07:09,700 --> 00:07:13,820
our code will be transformed to actually not mutate
138
00:07:13,820 --> 00:07:14,940
the original state.
139
00:07:14,940 --> 00:07:17,400
So it's safe to do that here.
140
00:07:17,400 --> 00:07:20,310
And we can set state.isAuthenticated
141
00:07:20,310 --> 00:07:24,140
equal to true here in the login state
142
00:07:25,050 --> 00:07:26,920
and here in the logout state,
143
00:07:26,920 --> 00:07:29,763
set isAuthenticated to false.
144
00:07:30,720 --> 00:07:34,753
And that could be our slice for the auth part.
145
00:07:36,310 --> 00:07:40,960
So I'll store this in a authSlice constant.
146
00:07:40,960 --> 00:07:42,830
Up here we have the counterSlice,
147
00:07:42,830 --> 00:07:46,210
now I have the authSlice as a second slice.
148
00:07:46,210 --> 00:07:50,400
And now we wanna add that to our Redux store.
149
00:07:50,400 --> 00:07:51,870
Now, very important,
150
00:07:51,870 --> 00:07:54,500
when you work with multiple slices,
151
00:07:54,500 --> 00:07:58,230
you still only have one Redux store,
152
00:07:58,230 --> 00:08:01,850
so you still only call configureStore once.
153
00:08:01,850 --> 00:08:03,840
This does not change.
154
00:08:03,840 --> 00:08:08,840
And this store only has one root reducer here
155
00:08:09,080 --> 00:08:12,800
but as I briefly explained earlier,
156
00:08:12,800 --> 00:08:16,170
this reducer actually does not just take
157
00:08:16,170 --> 00:08:19,070
a reducer function as an argument
158
00:08:19,070 --> 00:08:24,070
but also an object which acts as a map of reducers
159
00:08:24,230 --> 00:08:27,080
where you can then have any key names of your choice,
160
00:08:27,080 --> 00:08:28,890
for example, counter
161
00:08:28,890 --> 00:08:32,330
and then point at your different reducers.
162
00:08:32,330 --> 00:08:35,043
Here, for example, add counterSlice.reduce.
163
00:08:36,440 --> 00:08:39,620
And then we also add auth let's say as a key
164
00:08:39,620 --> 00:08:44,020
and then here we add authSlice.reducer.
165
00:08:44,020 --> 00:08:47,380
And these individual reducers here
166
00:08:47,380 --> 00:08:50,440
will then automatically be merged together
167
00:08:50,440 --> 00:08:52,440
into one main reducer,
168
00:08:52,440 --> 00:08:55,150
which is exposed to this store.
169
00:08:55,150 --> 00:08:58,260
That's how we can combine multiple slices
170
00:08:58,260 --> 00:09:00,023
and their reducers.
171
00:09:01,550 --> 00:09:03,540
Now, our authSlice, of course,
172
00:09:03,540 --> 00:09:06,920
also exposes actions, which we can use
173
00:09:06,920 --> 00:09:10,110
and therefore, I wanna expose those as well.
174
00:09:10,110 --> 00:09:13,450
So export authActions,
175
00:09:13,450 --> 00:09:16,363
which is authSlice.actions.
176
00:09:17,580 --> 00:09:20,370
So now we added this authSlice.
177
00:09:20,370 --> 00:09:23,830
Let's now use it in our different components
178
00:09:23,830 --> 00:09:26,200
and of course, definitely feel free
179
00:09:26,200 --> 00:09:28,560
to try this on your own first,
180
00:09:28,560 --> 00:09:32,690
tap into the store and use the auth state
181
00:09:32,690 --> 00:09:36,090
to conditionally show the Auth component
182
00:09:36,090 --> 00:09:39,040
or the UserProfile component in App
183
00:09:39,040 --> 00:09:43,300
and in the Header to conditionally show these items
184
00:09:43,300 --> 00:09:44,960
or not show them.
185
00:09:44,960 --> 00:09:48,250
And make sure that you dispatch the login
186
00:09:48,250 --> 00:09:51,850
and logout actions in the appropriate places.
187
00:09:51,850 --> 00:09:53,590
Just one important hint,
188
00:09:53,590 --> 00:09:57,750
since we are merging our reducers together here,
189
00:09:57,750 --> 00:10:02,180
the way we access data in our store changes slightly
190
00:10:02,180 --> 00:10:05,890
and we will need to adjust this for the counter as well.
191
00:10:05,890 --> 00:10:08,740
If we currently have a look at our application,
192
00:10:08,740 --> 00:10:11,890
you see the counter is not being output down there
193
00:10:11,890 --> 00:10:15,140
because we failed to extract it from the store.
194
00:10:15,140 --> 00:10:18,230
In the Counter component, our code hasn't changed
195
00:10:18,230 --> 00:10:20,370
but the code here changed.
196
00:10:20,370 --> 00:10:22,720
All we have to do to make it work again
197
00:10:22,720 --> 00:10:25,160
is go to our selectors,
198
00:10:25,160 --> 00:10:29,050
so to use selector, and when we drill into our state
199
00:10:29,050 --> 00:10:31,530
to read a value from there,
200
00:10:31,530 --> 00:10:36,200
we now need to use these identifiers,
201
00:10:36,200 --> 00:10:39,030
which we assigned in this reducer map
202
00:10:39,030 --> 00:10:42,930
to drill into our specific state slices.
203
00:10:42,930 --> 00:10:47,270
So for counter, I use counter as an identifier here,
204
00:10:47,270 --> 00:10:48,880
hence in the Counter component,
205
00:10:48,880 --> 00:10:50,860
when we wanna access the counter,
206
00:10:50,860 --> 00:10:53,960
it's actually state.counter.counter.
207
00:10:53,960 --> 00:10:55,540
This might look strange
208
00:10:55,540 --> 00:10:57,820
but with the first .counter,
209
00:10:57,820 --> 00:11:01,160
we make React Redux aware of the fact
210
00:11:01,160 --> 00:11:04,560
that we wanna dive into this slice in the end,
211
00:11:04,560 --> 00:11:08,311
into the state produced by this slicer's reducer
212
00:11:08,311 --> 00:11:10,580
and then in that state slice,
213
00:11:10,580 --> 00:11:13,750
we simply have a property named counter.
214
00:11:13,750 --> 00:11:15,820
If that would be named differently,
215
00:11:15,820 --> 00:11:17,138
if that would be value,
216
00:11:17,138 --> 00:11:19,260
then in the Counter component,
217
00:11:19,260 --> 00:11:21,703
it would be state.counter.value.
218
00:11:22,950 --> 00:11:25,330
But since it isn't value but counter,
219
00:11:25,330 --> 00:11:29,220
I'll revert it and revert it there as well
220
00:11:29,220 --> 00:11:32,170
and that's why we have state.counter.counter.
221
00:11:32,170 --> 00:11:36,170
And for showCounter, it's state.counter.showCounter.
222
00:11:36,170 --> 00:11:37,820
So when you do try this on your own
223
00:11:37,820 --> 00:11:41,050
for the authSlice, you should take this into account
224
00:11:41,050 --> 00:11:43,710
when you read data from the store.
225
00:11:43,710 --> 00:11:45,640
And with that, try it on your own.
226
00:11:45,640 --> 00:11:47,210
We're going to do it together
227
00:11:47,210 --> 00:11:48,383
in the next lecture.
17401
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.