Maximilian: 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?