Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,100 --> 00:00:04,300
Now for dispatching actions,
2
00:00:04,300 --> 00:00:06,680
createSlice has got us covered.
3
00:00:06,680 --> 00:00:11,570
It automatically creates unique action identifiers
4
00:00:11,570 --> 00:00:14,490
for our different reducers.
5
00:00:14,490 --> 00:00:17,120
To get hold of these action identifiers,
6
00:00:17,120 --> 00:00:21,263
we can use our counterSlice and access dot actions.
7
00:00:22,410 --> 00:00:26,320
That is then an object full of keys,
8
00:00:26,320 --> 00:00:30,250
where the the key names, increment, decrement, and so on.
9
00:00:30,250 --> 00:00:34,840
Match the method names we have in our createSlice function
10
00:00:34,840 --> 00:00:37,550
in the reducers area.
11
00:00:37,550 --> 00:00:42,530
Now we can access those keys on this actions object.
12
00:00:42,530 --> 00:00:46,070
And with that we don't access the reducer methods
13
00:00:46,070 --> 00:00:49,660
to find up there but instead we get methods
14
00:00:49,660 --> 00:00:53,220
created automatically by Redux Toolkit
15
00:00:53,220 --> 00:00:58,220
which when called will create action objects for us.
16
00:00:58,743 --> 00:01:02,560
These methods on the actions object here
17
00:01:02,560 --> 00:01:06,717
which we can call will create action objects for us.
18
00:01:06,717 --> 00:01:10,390
Therefore these methods are called action creators
19
00:01:10,390 --> 00:01:12,880
and they will create action objects
20
00:01:12,880 --> 00:01:17,880
for us where these objects already have a type property
21
00:01:17,960 --> 00:01:21,930
with a unique identifier per action.
22
00:01:21,930 --> 00:01:25,190
Automatically created behind the scenes.
23
00:01:25,190 --> 00:01:29,800
So we don't have to worry about action identifiers.
24
00:01:29,800 --> 00:01:33,870
We don't have to create those action objects on our own.
25
00:01:33,870 --> 00:01:37,360
We can tap into this actions key into this actions
26
00:01:37,360 --> 00:01:40,060
object on our createSlice
27
00:01:40,060 --> 00:01:43,172
and execute these action creator methods,
28
00:01:43,172 --> 00:01:47,490
which with their name match our reducer methods
29
00:01:47,490 --> 00:01:51,430
to dispatch actions, which will then ultimately
30
00:01:51,430 --> 00:01:54,360
trigger those different reducer methods.
31
00:01:54,360 --> 00:01:55,818
That's how this works now.
32
00:01:55,818 --> 00:01:58,740
And that means that we, as a developer,
33
00:01:58,740 --> 00:02:03,740
don't have to worry about creating action objects on our own
34
00:02:03,760 --> 00:02:07,260
and about coming up with unique identifiers
35
00:02:07,260 --> 00:02:09,483
and about avoiding typos.
36
00:02:10,419 --> 00:02:12,890
So that means that what we could do here
37
00:02:12,890 --> 00:02:14,781
is at the bottom of this file,
38
00:02:14,781 --> 00:02:19,600
we get our counter actions like this.
39
00:02:19,600 --> 00:02:24,600
And we then for example, export our counter actions.
40
00:02:24,890 --> 00:02:27,110
So we don't just export the store
41
00:02:27,110 --> 00:02:30,360
but also our counter actions.
42
00:02:30,360 --> 00:02:34,020
And by doing this we can then go to the component where we
43
00:02:34,020 --> 00:02:38,140
need the actions in this case to counter JS file,
44
00:02:38,140 --> 00:02:43,140
and import from our index JS file here,
45
00:02:44,450 --> 00:02:47,350
and import the counter actions
46
00:02:47,350 --> 00:02:50,300
which we just exported there.
47
00:02:50,300 --> 00:02:55,300
And now, again that's an object which has our reducer names
48
00:02:56,200 --> 00:02:59,737
our reducer method names as keys.
49
00:02:59,737 --> 00:03:02,940
So now if we want to dispatch an action here
50
00:03:02,940 --> 00:03:07,940
all we have to do is we have to access counter actions.
51
00:03:08,490 --> 00:03:11,380
And then for example, here, increment
52
00:03:11,380 --> 00:03:14,900
and actually execute this as a method
53
00:03:14,900 --> 00:03:17,680
because increment is a method which when
54
00:03:17,680 --> 00:03:22,680
executed creates a full action object with the type set
55
00:03:24,030 --> 00:03:28,930
to this automatically created unique action identifier.
56
00:03:28,930 --> 00:03:32,390
So we get a full action object automatically created
57
00:03:32,390 --> 00:03:33,333
for us here.
58
00:03:34,510 --> 00:03:35,650
And I also want to do this
59
00:03:35,650 --> 00:03:40,223
for a detriment, counterActions.detriment
60
00:03:41,360 --> 00:03:46,360
and all the four toggle of course, toggle a counter.
61
00:03:47,260 --> 00:03:49,100
The question just is
62
00:03:49,100 --> 00:03:53,520
what do we do here when we also need a payload?
63
00:03:53,520 --> 00:03:57,370
And the answer is we still use our account
64
00:03:57,370 --> 00:04:01,010
or actions and then use this automatically
65
00:04:01,010 --> 00:04:04,624
generated action creator method here.
66
00:04:04,624 --> 00:04:09,624
But then to this method, we pass our payload data.
67
00:04:10,760 --> 00:04:11,760
So for example,
68
00:04:11,760 --> 00:04:15,630
an object with any property value pairs of our choice
69
00:04:15,630 --> 00:04:19,053
or just the number by which we want to increase here.
70
00:04:20,050 --> 00:04:24,180
So any kind of value can be passed to increase.
71
00:04:24,180 --> 00:04:27,140
The only important thing to know here is how
72
00:04:27,140 --> 00:04:29,530
you then extract that value
73
00:04:30,630 --> 00:04:34,501
because what Redux Toolkit will do for us here
74
00:04:34,501 --> 00:04:39,260
is it will automatically create action objects
75
00:04:39,260 --> 00:04:41,860
which dispatches where the type
76
00:04:41,860 --> 00:04:45,350
is some unique identifier generated
77
00:04:45,350 --> 00:04:49,920
by Redux toolkit and any value you pass here.
78
00:04:49,920 --> 00:04:54,700
As an argument to this action method you're executing,
79
00:04:54,700 --> 00:04:59,163
will it be stored in an extra field named payload.
80
00:05:00,310 --> 00:05:02,860
And that field name is not up to you.
81
00:05:02,860 --> 00:05:06,733
That's the default Redux Toolkit uses here.
82
00:05:07,670 --> 00:05:10,510
Hence now in our index JS file
83
00:05:10,510 --> 00:05:14,270
in the intrigue is reducer instead of action amount.
84
00:05:14,270 --> 00:05:18,210
We now need to access action on payload,
85
00:05:18,210 --> 00:05:21,730
because that is the name off the property
86
00:05:21,730 --> 00:05:25,980
which will hold any extra data you might be dispatching
87
00:05:27,120 --> 00:05:29,750
but with that was a lot of work.
88
00:05:29,750 --> 00:05:30,700
But with that,
89
00:05:30,700 --> 00:05:35,140
if we save all the files if you reload your application
90
00:05:35,140 --> 00:05:37,730
we can now use it as we did before.
91
00:05:37,730 --> 00:05:40,610
And everything works the way it did before.
92
00:05:40,610 --> 00:05:44,510
But now with help of Redux Toolkit
93
00:05:44,510 --> 00:05:49,170
and this was certainly a bit of work to translate our code
94
00:05:49,170 --> 00:05:52,910
to refactor our code, to use Redux Toolkit.
95
00:05:52,910 --> 00:05:54,750
However, it also took quite long
96
00:05:54,750 --> 00:05:58,920
because I tried my best to explain it in depth.
97
00:05:58,920 --> 00:06:01,874
But now that we did transform our code,
98
00:06:01,874 --> 00:06:06,874
it's shorter, it's more concise and it's easier to maintain.
99
00:06:07,350 --> 00:06:10,860
And it's also easier to now work with Redux.
100
00:06:10,860 --> 00:06:13,720
If you have a more complex application
101
00:06:13,720 --> 00:06:15,360
which we don't have yet
102
00:06:15,360 --> 00:06:17,963
but which we will still get in this course.
8209
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.