Original subtitles

So let's now get started with Redux toolkit.

And for that I'll quit my dev server

and then NPM install @reduxjs/toolkit.

That is simply the package name.

You all define this, the official docs.

So we execute this and this will then install

this Redux JS toolkit package.

Now, when you install that you then there after

can also uninstall Redux.

So the Redux library itself

because that is already included in Redux toolkit.

So you could now remove this Redux entry here

from package Json.

Now with it installed we can restart the development server.

And now the question is how we use Redux toolkit.

Well we do use it here in this store folder

in the index JS file

because Redux toolkit simplifies a couple of aspects

of working with Redux.

And let's start with the reducer

and also in directly with the actions.

Here at the top and the index JS file

we can import something from @reduxjs/toolkit.

Ad that's something is the create slice function.

There also is a create reducer function

which would also allow us to create a reducer

with certain enhancements,

but create slice is even more powerful than create reducer.

And it will simplify a couple of aspects in one go.

Now, once we imported it, we can call it,

we can call create slice here,

and I will call it the low my initial state object.

And then create slice once an object as an argument.

Now, what we do with create slice

is we are preparing a slice of our global state.

And when we have different pieces of state

which are not directly related,

let's say an authentication status and the counter status,

we could create different slices

potentially also in different files

to make our code maintainable.

Now here we only have counter related state

and I would say that the counter

and show counter belong kind of together

so I will create one slice for now.

Now every slice needs a name

and identifier of that piece of state so to say.

And here I'll name this counter but the name is up to you.

It doesn't have to be this name here,

it can be any name you want.

Next you need to set up an initial state.

And here I wanna set my initial state equal to that object

or I therefore just point at initial state

so at this constant and use that constant value

as a value or we even use modern JavaScript Syntex,

omit this part and let JavaScript behind the scenes

automatically expanded to this code again.

So with that, we're setting the initial state

of this state slice to this initial state.

And then we also need to add reducers.

Reducers is again, an object, a map you could say,

of all the reducers this slice needs,

this state slice needs.

Now here in this object, you can now simply add methods

with any names of your choice,

though those names will become important later.

And here I'll add an increment method.

I will add a detriment method.

I will add an increase method,

and I will also add my toggle counter method, let's say.

So for methods because I had four different if cases

in my reducer before.

Now, every method here

will then automatically receive the latest state.

These methods will be called for you by Redux,

and they will receive the current state.

Also to the action, and we'll use that in a second,

but actually here we don't need the action

because these methods will automatically be called for you

depending on which action was triggered.

So we don't need to write our own if checks anymore

instead we'll soon be able

to identify these different reducers and dispatch actions

that target these different reducers.

So we now don't have to write our own if checks anymore

which also reduces some boilerplate code

we would have to write otherwise.

Now in these methods here in the reducers map

we now also can do something else than we did before.

Now, here we are allowed to mutate the state.

So here we can set state.counter++ for example,

for incrementing it.

Now this was forbidden before

and I emphasized that it is forbidden.

I also did emphasize it because here it seems to be allowed.

But the important part is the word seems.

We still must not manipulate the existing state

but the good thing is when using Redux toolkit

and its functions like create slice,

we can't accidentally manipulate the existing state.

Because Redux toolkit internally uses another package,

called imgur, which will detect code like this

and which will automatically clone the existing state,

create a new state object, keep all the state

which we're not editing, and override the state

which we are editing in an immutable way.

So we still have immutable code here

even though it doesn't look like it

because of this internally used package

and therefore we as a developer

have a much easier time working with Redux

because we don't have to create a copy manually

and keep all the code we're not changing,

instead, we just change the code we wanna change

and internally it's translated into immutable code.

Therefore in decrement we execute state.counter--

and here for increase

we now need a payload.

We now need extra data.

So how does that work?

Now when using Redux toolkit we of course,

can still have reducers that listen to actions

that have an extra payload, extra data.

Because these were user functions here,

don't just receive the state.

They also still do get the action.

We just don't need to accept it in the other two reducers

because we don't need to do anything

with the action in there.

But now here if we need some data

that's attached to the action,

then we can still accept it as a parameter

and use it in the reducer function in the reducer method.

So they are for now I can set state counter

equal to state counter plus action.amount.

So basically what I did down here as well.

Now again, in this mutable looking way,

which isn't really mutating the state.

Now for a toggle counter we don't need the actual payload

here we just get the state,

and set state.show counter equal to not state.show counter

to invert this value.

So now we created this slice and writing that code

is certainly quite convenient and shorter

than what we had to do down there.

But how do we now make our store aware of that slice?

How do we use that slice?

And how do we then dispatch actions against this slice?