I mentioned in the last lecture that action creators can help us, for that I'll create a new subfolder
in the store folder,
I'll name it actions and I move my actions in there,
I'll leave the file as it is for now.
I move that into the actions folder because we'll also add multiple action files over the next lectures
but for now, let's stick this one. In there,
we export all our action identifiers and that is working fine.
Now I want to introduce a new way of creating actions, so-called action creators,
how does that look like? What is that? An action creator
is just a function which returns an action or which creates an action, hence the name.
We right now create our actions hardcoded in our code or simply when we need them
I should say, in the counter component. Here
on mapDispatchToProps, the actions,
these are just these javascript objects, right?
We create them here, we create them by simply writing the code for the object into our dispatch function.
An action creator would return such an object and you can see the benefit when we talk about asynchronous
code.
So let's create an action creator right now
for synchronous code though. For that, I'll create a new function and you can use the function keyword
or create an arrow function and I'll name it increment,
the convention is to use the same name as your identifier
but in camel case, so lowercase character first. Increment is an arrow function as I said,
it will return something eventually and it will receive something, it can receive something I should
say, it receives any payloads you want to pass with that action. Here for increment,
I don't want to pass any,
so instead I just return something and that something is the actions or javascript object.
Now as any action, it has to have a type and the type should be increment,
referring to our identifier. Previously, I did this in the counter.js
file here, increment which I imported from action types by reaching out that actions file.
Now I actually can't get rid of that import and we will have to change what we dispatch here soon.
For now let's go back to the actions.js file,
this is our first action creator already,
it returns,
it creates therefore an action and an action just needs to have a type, so that's the bare minimum action
we can create.
We can use this action creator now in the counter.js file where we do dispatch it by first of
all importing it.
So here I'll import something from this actions file,
so I'll navigate up to the store folder into actions and there to the actions.js file. Now in there,
I need to go back to it,
I need to export this increment function.
Now I can import it by name
so in the counter.js file, I can import increment and keep in mind, this is a function.
Now we can use that function in the counter.js file
at the bottom where we map our props to dispatch functions. For increment
here, I will now simply pass increment like that and also execute it
because once I execute increment and this will happen when this prop is basically executed, when I execute
increment,
this will give me an action because it's an action creator, don't forget that, increment returns us
an action,
so we execute it, we get an action.
Now that's very nice,
our application is still broke though because all the other actions here are not connected.
So what I'll quickly do is I'll create more action creators for all the actions or to be precise,
you should do this.
So here is your challenge,
create action creators like this one for all the actions and see if you can figure out how to handle
the actions which actually need a payload.
We'll do it together in the next video.