Were you successful? Let's try together now. We have one action creator already,
now I'll add more.
The second one I'll add is simply called decrement,
therefore the type will be decrement,
I don't need to pass any payload to it. Now
come add and subtract
so let's start with add, I'll name the function add
and here, we now need a payload.
If we have a look at the counter.js file where we dispatch it, there
we set up a payload value 10 or value 15,
how do we get that payload into our action creator?
Well keep in mind, we execute it here in our container
so this is where we probably want to pass any payload as arguments to the action creator,
so we should expect that payload as arguments.
So here for example, a value argument you can name it whatever you like, to then set the val property
and I'll just use the value here because I use that before so that I don't have to change my code in the
reducer so well on the created action where we set equal to the incoming value.
Now the same will happen for subtract, oh I should also change the type before I do that though,
so the same will now happen to subtract, there subtract like this type should be set to subtract
and I also get the value which I'll pass on on the val prop.
Now finally, if we have a look at the counter.js file for the container, we also see for onStore and
onDeleteResults, so for the actions dispatched there,
we also get a payload result and resultElId, so we should also create the action creators with these
payloads in mind.
So I'll just add another action, another action creator I should say, I'll name this one storeResult,
that's the camel case notation I was referring to, starting with a lower case character but each word
inside the entire word then starts with an upper case one.
So here in this action creator for the storeResult action, I will get my result
I want to store and I expect to have a result property on the action which gets created in the end.
So let's go over there, let's expect the value or argument which I will name res, you can pick any name
you want,
important, a result property has to be set and I will pass res as a value, the type also is a different
one,
it's storeResult.
Now finally, let's create the action created for the last action we have.
It was deleteResult so I'll name it appropriately, here
I get the result element ID and therefore the type will be deleteResult
and if we consult our counter container one more time, we see that previously we dispatched an action
with ResultElId as a property, we should keep that pattern so that our reducers still works
so let's copy that property name, head back to the actions file, set it as a property here and assign the
incoming resElId value as a value.
With that, we got a bunch of action creators,
we can now import them all in our counter.js file.
So there I will simply import everything as action creators and now, I can use them down there when
I dispatch them.
So for example, increment now needs to be called on action creators, the same for decrement, you can use
action creators and call decrement there,
the same of course for add, there we call the add method but here we need to pass the value as an argument
as you learned
so make sure to do that. For delete, you can also call delete, excuse me, subtract and pass a value there
so there we used, if I have a look at the caption, 15
so let me subtract 15 here.
And for the storeResult action, I'll call action creators store result, here we need to pass the result
we want to store and we receive this here as an argument to that property related method,
so here I will pass on result.
And finally, for delete result, I'll call action creators delete result and pass my ID on, the ID is
also received on this anonymous function.
So I'm just using the action creators here to create actions,
I still dispatch the same actions as before,
this didn't change. Now I still get an error that some file isn't found,
this should be a bug here,
I'll simply restart npm start and it should fix it,
let's see, yeah
it was pointing at the wrong file but we still have a problem in the reducer
which makes sense because we moved the position of the actions.js file.
So in our reducers, we have to adjust the import paths, it's no longer in the folder above the reducers
folder,
there we have to go into the actions folder instead and then it will work again.
So adjust the import paths in both reducers like this,
save everything and thereafter the application should work again.
So now I click these buttons and we see indeed that we are successfully manipulating our store again, this time
through our action creators though. Thus far, only synchronous code runs in them,
as I said action creators are useful for handling asynchronous code
so let's dive into asynchronous code next.
But let me also quickly elaborate on the question whether we should use them for synchronous code or not,
the answer is it's up to you,
it's a clean way of creating your actions,
you have everything about actions in one file,
you don't have to create the action objects anywhere else.
This is a tiny cleanup which can be considered good so nothing speaks against using action creators
for synchronous code too
but as I said, it will be extremely useful for asynchronous code.
We'll see this in the next lecture.