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:03,870
Now to use our slice,
2
00:00:03,870 --> 00:00:07,160
we first of all need to use the return value
3
00:00:07,160 --> 00:00:11,000
of calling createSlice because here we get back
4
00:00:11,000 --> 00:00:14,790
our counterSlice, now this name is up to you,
5
00:00:14,790 --> 00:00:17,540
but it's a slice of our global state,
6
00:00:17,540 --> 00:00:19,550
the slice which is responsible
7
00:00:19,550 --> 00:00:21,633
for working with our counter.
8
00:00:23,200 --> 00:00:28,200
Now we wanna register this with our store.
9
00:00:28,750 --> 00:00:30,340
So first of all we can get rid
10
00:00:30,340 --> 00:00:34,240
of our old counterReducer here, we don't need that anymore.
11
00:00:34,240 --> 00:00:36,950
So let's remove it to make this a bit more readable.
12
00:00:36,950 --> 00:00:39,370
And now here to createStore,
13
00:00:39,370 --> 00:00:44,180
we could pass our counterSlice.reducer.
14
00:00:44,180 --> 00:00:49,180
With that we get access to the reducers set up in the slice
15
00:00:49,470 --> 00:00:53,740
even though it .reducer, it's basically a big reducer
16
00:00:53,740 --> 00:00:55,420
with a couple of if statements
17
00:00:55,420 --> 00:00:58,000
that trigger those different reducer methods
18
00:00:58,000 --> 00:01:02,228
depending on the action type and we would be good to go.
19
00:01:02,228 --> 00:01:04,670
Now we just couldn't dispatch actions right now,
20
00:01:04,670 --> 00:01:08,780
but in theory, we would be good to go like this.
21
00:01:08,780 --> 00:01:11,170
But if we have bigger applications
22
00:01:11,170 --> 00:01:13,480
with multiple state slices,
23
00:01:13,480 --> 00:01:16,900
we would face a problem if we try to do it like this,
24
00:01:16,900 --> 00:01:19,250
because there can only be one reducer
25
00:01:19,250 --> 00:01:22,940
passed to create store and when we have multiple slices,
26
00:01:22,940 --> 00:01:27,560
we have multiple reducers which we access with .reducer
27
00:01:27,560 --> 00:01:28,863
on the different slices.
28
00:01:30,350 --> 00:01:34,160
Now with standard Redux, there is a combineReducers function
29
00:01:35,590 --> 00:01:39,880
which we could use for that but we can also ditch Redux here
30
00:01:39,880 --> 00:01:44,100
and instead import another function from reduxjs/toolkit
31
00:01:44,100 --> 00:01:46,410
which will make that a bit easier.
32
00:01:46,410 --> 00:01:49,133
We can import the configureStore function.
33
00:01:50,265 --> 00:01:54,640
ConfigureStore like createStore creates a store
34
00:01:54,640 --> 00:01:57,290
but it makes merging multiple reducers
35
00:01:57,290 --> 00:02:01,000
into one reducer easier thereafter.
36
00:02:01,000 --> 00:02:04,540
So here we can now call configureStore,
37
00:02:04,540 --> 00:02:08,449
and to configureStore, we now pass an object
38
00:02:08,449 --> 00:02:11,580
not a reducer function but an object.
39
00:02:11,580 --> 00:02:15,963
It's a configuration object expected by configureStore.
40
00:02:16,990 --> 00:02:21,990
A configuration object where we then set a reducer property
41
00:02:23,770 --> 00:02:26,863
and that's an expected property by configureStore.
42
00:02:27,760 --> 00:02:32,490
Reducer singular and not reducers plural
43
00:02:32,490 --> 00:02:36,475
because still, no matter if we use createStore
44
00:02:36,475 --> 00:02:41,475
or configureStore, Redux wants one main reducer function,
45
00:02:41,920 --> 00:02:45,330
which is responsible for the global state.
46
00:02:45,330 --> 00:02:48,360
However, with configureStore,
47
00:02:48,360 --> 00:02:53,360
the value for reducer can be a single reducer
48
00:02:54,050 --> 00:02:58,940
so we can for example use counterSlice.reducer
49
00:02:58,940 --> 00:03:01,190
to use the reducer from that counterSlice
50
00:03:02,040 --> 00:03:04,560
which combines all those reducer methods
51
00:03:04,560 --> 00:03:06,610
to find in that slice.
52
00:03:06,610 --> 00:03:11,080
We can use that as a global main reducer
53
00:03:11,080 --> 00:03:12,920
and here that would make sense
54
00:03:12,920 --> 00:03:15,760
because this is the only state slice we have
55
00:03:15,760 --> 00:03:18,453
and therefore, the only reducer we have,
56
00:03:19,440 --> 00:03:24,440
but if we had multiple state slices in a bigger application
57
00:03:24,650 --> 00:03:26,830
something we're going to see later,
58
00:03:26,830 --> 00:03:31,830
then alternatively as a value for this reducer key,
59
00:03:31,850 --> 00:03:36,850
we could also set an object and in that object,
60
00:03:37,000 --> 00:03:40,110
we can set up any keys of our choice,
61
00:03:40,110 --> 00:03:42,740
so any property names of our choice
62
00:03:42,740 --> 00:03:45,160
and the values of those properties
63
00:03:45,160 --> 00:03:48,700
would then be different reducer functions.
64
00:03:48,700 --> 00:03:53,180
So we would create a map of reducers you could say,
65
00:03:53,180 --> 00:03:58,180
and this map is then set as a value for the main reducer
66
00:03:58,300 --> 00:04:00,520
and behind the scenes configureStore
67
00:04:01,390 --> 00:04:06,180
will emerge all those reducers into one big reducer.
68
00:04:06,180 --> 00:04:08,950
So it will merge them for us.
69
00:04:08,950 --> 00:04:12,220
And that's an alternative we can use,
70
00:04:12,220 --> 00:04:15,490
not an alternative we will use here though
71
00:04:15,490 --> 00:04:18,420
because here we only have one reducer
72
00:04:18,420 --> 00:04:20,380
so we can direct the assign,
73
00:04:20,380 --> 00:04:23,287
that reducer from the counterSlice
74
00:04:23,287 --> 00:04:27,423
as our main reducer for configureStore.
75
00:04:28,540 --> 00:04:32,760
Now the question is, how do we dispatch actions?
76
00:04:32,760 --> 00:04:35,840
Because we don't have our own, if checks,
77
00:04:35,840 --> 00:04:38,850
we don't know what the identifiers
78
00:04:38,850 --> 00:04:40,840
for our actions should be.
79
00:04:40,840 --> 00:04:42,740
We just have these method names
80
00:04:42,740 --> 00:04:45,313
but how do we now know what to dispatch?
6457
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.