Original subtitles

Now for dispatching actions,

createSlice has got us covered.

It automatically creates unique action identifiers

for our different reducers.

To get hold of these action identifiers,

we can use our counterSlice and access dot actions.

That is then an object full of keys,

where the the key names, increment, decrement, and so on.

Match the method names we have in our createSlice function

in the reducers area.

Now we can access those keys on this actions object.

And with that we don't access the reducer methods

to find up there but instead we get methods

created automatically by Redux Toolkit

which when called will create action objects for us.

These methods on the actions object here

which we can call will create action objects for us.

Therefore these methods are called action creators

and they will create action objects

for us where these objects already have a type property

with a unique identifier per action.

Automatically created behind the scenes.

So we don't have to worry about action identifiers.

We don't have to create those action objects on our own.

We can tap into this actions key into this actions

object on our createSlice

and execute these action creator methods,

which with their name match our reducer methods

to dispatch actions, which will then ultimately

trigger those different reducer methods.

That's how this works now.

And that means that we, as a developer,

don't have to worry about creating action objects on our own

and about coming up with unique identifiers

and about avoiding typos.

So that means that what we could do here

is at the bottom of this file,

we get our counter actions like this.

And we then for example, export our counter actions.

So we don't just export the store

but also our counter actions.

And by doing this we can then go to the component where we

need the actions in this case to counter JS file,

and import from our index JS file here,

and import the counter actions

which we just exported there.

And now, again that's an object which has our reducer names

our reducer method names as keys.

So now if we want to dispatch an action here

all we have to do is we have to access counter actions.

And then for example, here, increment

and actually execute this as a method

because increment is a method which when

executed creates a full action object with the type set

to this automatically created unique action identifier.

So we get a full action object automatically created

for us here.

And I also want to do this

for a detriment, counterActions.detriment

and all the four toggle of course, toggle a counter.

The question just is

what do we do here when we also need a payload?

And the answer is we still use our account

or actions and then use this automatically

generated action creator method here.

But then to this method, we pass our payload data.

So for example,

an object with any property value pairs of our choice

or just the number by which we want to increase here.

So any kind of value can be passed to increase.

The only important thing to know here is how

you then extract that value

because what Redux Toolkit will do for us here

is it will automatically create action objects

which dispatches where the type

is some unique identifier generated

by Redux toolkit and any value you pass here.

As an argument to this action method you're executing,

will it be stored in an extra field named payload.

And that field name is not up to you.

That's the default Redux Toolkit uses here.

Hence now in our index JS file

in the intrigue is reducer instead of action amount.

We now need to access action on payload,

because that is the name off the property

which will hold any extra data you might be dispatching

but with that was a lot of work.

But with that,

if we save all the files if you reload your application

we can now use it as we did before.

And everything works the way it did before.

But now with help of Redux Toolkit

and this was certainly a bit of work to translate our code

to refactor our code, to use Redux Toolkit.

However, it also took quite long

because I tried my best to explain it in depth.

But now that we did transform our code,

it's shorter, it's more concise and it's easier to maintain.

And it's also easier to now work with Redux.

If you have a more complex application

which we don't have yet

but which we will still get in this course.