Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,130 --> 00:00:04,310
We are dispatching an action here
2
00:00:04,310 --> 00:00:07,330
and that action has a type of increment.
3
00:00:07,330 --> 00:00:09,190
Typically when using Redux,
4
00:00:09,190 --> 00:00:13,410
the goal is to do different things inside of the reducer
5
00:00:13,410 --> 00:00:15,720
for different actions.
6
00:00:15,720 --> 00:00:19,600
And that's why you get the action as a second argument here.
7
00:00:19,600 --> 00:00:22,820
You get the current state and then the action
8
00:00:22,820 --> 00:00:27,280
that was dispatched that caused this reducer to run.
9
00:00:27,280 --> 00:00:29,600
And therefore in the reducer,
10
00:00:29,600 --> 00:00:32,400
we can of course, look into this action.
11
00:00:32,400 --> 00:00:34,810
We can check if the action.type
12
00:00:34,810 --> 00:00:37,643
is equal to increment for example.
13
00:00:38,980 --> 00:00:42,210
And if that's the case, then let's say,
14
00:00:42,210 --> 00:00:46,500
I wanna return this increment that counter.
15
00:00:46,500 --> 00:00:49,010
Otherwise, if a different action
16
00:00:49,010 --> 00:00:52,960
like the default initialization action was dispatched,
17
00:00:52,960 --> 00:00:56,033
I wanna return the unchanged state let's say,
18
00:00:56,910 --> 00:00:58,760
and then we'll also change the value
19
00:00:58,760 --> 00:01:00,400
we have in our state here
20
00:01:00,400 --> 00:01:02,600
because now for the initialization,
21
00:01:02,600 --> 00:01:05,129
we will not increment the counter
22
00:01:05,129 --> 00:01:08,263
but return the unchanged default state.
23
00:01:09,500 --> 00:01:11,330
And then for the increment action,
24
00:01:11,330 --> 00:01:13,763
we will return the updated counter.
25
00:01:14,610 --> 00:01:16,730
So with this little change made
26
00:01:16,730 --> 00:01:20,550
if we execute this file again, we now have counter one here
27
00:01:20,550 --> 00:01:24,143
because for the initialization, it's no longer incremented.
28
00:01:26,050 --> 00:01:29,580
And that we can, of course, also dispatch other actions,
29
00:01:29,580 --> 00:01:33,443
we could dispatch an action of type, decrement.
30
00:01:34,630 --> 00:01:37,410
So with an identifier of detriment,
31
00:01:37,410 --> 00:01:40,760
then we just need to add the appropriate code here.
32
00:01:40,760 --> 00:01:44,323
If action.type equals decrement,
33
00:01:45,720 --> 00:01:48,930
and then just return our new state object
34
00:01:48,930 --> 00:01:50,150
where counter is set
35
00:01:50,150 --> 00:01:54,173
to the state.counter minus one, like this.
36
00:01:55,370 --> 00:01:58,493
If we do this and save doesn't run our file again,
37
00:01:59,740 --> 00:02:03,470
we have counter one counter zero as outputs.
38
00:02:03,470 --> 00:02:06,600
This first output is coming from our subscription
39
00:02:06,600 --> 00:02:09,009
after the increment action
40
00:02:09,009 --> 00:02:11,200
and then we change the state again
41
00:02:11,200 --> 00:02:13,350
hence the subscription triggers again
42
00:02:13,350 --> 00:02:15,630
and to therefore we now see counter zero
43
00:02:15,630 --> 00:02:17,823
because we decrease the counter here.
44
00:02:19,030 --> 00:02:21,700
That's how Redux works.
45
00:02:21,700 --> 00:02:25,030
Now there is a bit more to it and more things you can do
46
00:02:25,030 --> 00:02:29,890
but that is the heart of Redux and of how it works.
47
00:02:29,890 --> 00:02:32,970
Obviously, we're not using it with React here
48
00:02:32,970 --> 00:02:36,650
but that is how Redux works no matter how you use it.
49
00:02:36,650 --> 00:02:41,550
And it indeed isn't a library restricted to React,
50
00:02:41,550 --> 00:02:45,550
you can use Redux in any JavaScript project.
51
00:02:45,550 --> 00:02:47,470
There even are implementations
52
00:02:47,470 --> 00:02:50,380
for other programming languages as well.
53
00:02:50,380 --> 00:02:54,620
But of course here we are going to use it with React though.
54
00:02:54,620 --> 00:02:56,720
And therefore in the next lecture,
55
00:02:56,720 --> 00:03:00,030
let's now explore how we would use Redux
56
00:03:00,030 --> 00:03:02,123
in a React application.
4433
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.