Original subtitles

Now to use our slice,

we first of all need to use the return value

of calling createSlice because here we get back

our counterSlice, now this name is up to you,

but it's a slice of our global state,

the slice which is responsible

for working with our counter.

Now we wanna register this with our store.

So first of all we can get rid

of our old counterReducer here, we don't need that anymore.

So let's remove it to make this a bit more readable.

And now here to createStore,

we could pass our counterSlice.reducer.

With that we get access to the reducers set up in the slice

even though it .reducer, it's basically a big reducer

with a couple of if statements

that trigger those different reducer methods

depending on the action type and we would be good to go.

Now we just couldn't dispatch actions right now,

but in theory, we would be good to go like this.

But if we have bigger applications

with multiple state slices,

we would face a problem if we try to do it like this,

because there can only be one reducer

passed to create store and when we have multiple slices,

we have multiple reducers which we access with .reducer

on the different slices.

Now with standard Redux, there is a combineReducers function

which we could use for that but we can also ditch Redux here

and instead import another function from reduxjs/toolkit

which will make that a bit easier.

We can import the configureStore function.

ConfigureStore like createStore creates a store

but it makes merging multiple reducers

into one reducer easier thereafter.

So here we can now call configureStore,

and to configureStore, we now pass an object

not a reducer function but an object.

It's a configuration object expected by configureStore.

A configuration object where we then set a reducer property

and that's an expected property by configureStore.

Reducer singular and not reducers plural

because still, no matter if we use createStore

or configureStore, Redux wants one main reducer function,

which is responsible for the global state.

However, with configureStore,

the value for reducer can be a single reducer

so we can for example use counterSlice.reducer

to use the reducer from that counterSlice

which combines all those reducer methods

to find in that slice.

We can use that as a global main reducer

and here that would make sense

because this is the only state slice we have

and therefore, the only reducer we have,

but if we had multiple state slices in a bigger application

something we're going to see later,

then alternatively as a value for this reducer key,

we could also set an object and in that object,

we can set up any keys of our choice,

so any property names of our choice

and the values of those properties

would then be different reducer functions.

So we would create a map of reducers you could say,

and this map is then set as a value for the main reducer

and behind the scenes configureStore

will emerge all those reducers into one big reducer.

So it will merge them for us.

And that's an alternative we can use,

not an alternative we will use here though

because here we only have one reducer

so we can direct the assign,

that reducer from the counterSlice

as our main reducer for configureStore.

Now the question is, how do we dispatch actions?

Because we don't have our own, if checks,

we don't know what the identifiers

for our actions should be.

We just have these method names

but how do we now know what to dispatch?