So we introduced action creators in the last lectures and you learned that they are especially useful when
working with asynchronous code
because together with redux-thunk, that middleware, we could basically find a place to execute our asynchronous
code when dispatching an action and block that original dispatching to then just dispatch another action,
all that handled by that
redux-thunk middleware
once our asynchronous task is done. Now with that, we got this new actions file which not only holds our
action types,
so the unique identifiers
so to say
but also all these creator functions which use these identifiers. Obviously our file here in the demo
project isn't that big,
we can of course simply stick to one file but we also split up the reducers into counter and result
and you typically also do that for actions as your application grows and you're going to see that
in the burger builder project. Therefore I'll create new files here, I'll create a counter.js file
and I'll create a result.js file,
so just like in the reducers folder, now for actions. I'll rename the actions file to action types
because here, I now only want to export these unique identifiers, so that
I have one file providing all the action types my application knows and theoretically, you could of course
also split up into multiple files.
Now I'll take my action creators and put them into their respective files
so for the counter, I'll take the increment, decrement, add and subtract action creator, cut it from
the action types file and put it into the counter file.
Now of course, this reference to this constant won't work anymore because that constant now lives in
a different file.
So I should import that and I will import everything as action types from ./actionTypes which
allows me to now set up my types by accessing action types and then the constants which we do export
in that file.
I'll do the same for decrement and of course also for add and subtract, like this,
finally also for subtract.
So that's the updated counter.js file with the action creators for the counter related actions,
of course I'll do the same for the result, take my saveResult, storeResult and this deleteResult
creator,
so that also includes the asynchronous one
and then I'll also import everything as action types from this action types file
and with that, we can also use the action types we import to assign the right types here.
So storeResult, in storeResult itself I just have my asynchronous code dispatching saveResult
in the end and then deleteResult, I of course also want to dispatch deleteResult.
So now I got my action creators outsourced, the action types file now only contains my action types and
exports them,
now I also want to have one file exporting all my action creators,
so I'll create an index.js file here and in there, I'll actually use a syntax you might have not
seen before,
I'll just export something from a file.
I can do that so I don't even import it in this file,
I just have one file, the index.js file
which groups
all exports from separate files, so that in the end I can always point to that file to import something
from any of the files I'll point to in that file here. So let me quickly do that, let's export something from the
counter.js file and that something actually will be a list of everything
this file does offer, like add, subtract, increment and decrement.
And this really is just an advanced feature if someone wants to use such a set up of the project to handle
a bigger project with lots and lots of actions and action creators of course,
it's overkill for this demo project but it will make more sense later when we reach our burger builder
and I want to teach you the concept right now already.
So I'll also export something from the result file here that will be storeResult and it will be deleteResult,
saveResult is not exported here though I could of course also export it but I'll never need it
in any other file so I won't include it into my grouping.
Now what this allows me to do is to later just import from index.js and actually import from any of
these two files which I group in this index.js file.
Now that's just a tiny improvement to make our files even a bit leaner, now what I also need to do is I need
to adjust my reducer file where I do import these action types, so in counter.js where I import action
types, that now lives in the actionTypes.js file in the actions folder, the same adjustment needs
to be made in the result reducer,
there I also now import from the action types file in the actions folder. And finally in the counter
where I dispatch, here I refer to action creators and that now actually should point to the index.js
file,
so /index. Let's quickly restart npm start to see if it really has problems or just is stuck in
the rebuild process,
we do find an issue in the counter.js file,
it doesn't like my imports here, action types,
oh because I mistyped here it's actions,
that's a typo in the file name, the file name should be action types.
Now with the file name changed, I need to change all my imports in the other action files too,
there I was referencing the wrong file, with all that adjusted to really point to actiontypes.js,
we should have a working application again just as before with asynchronous storage available.
Now however with a bit more split up action creators over multiple files, as I said for this demo project
overkill but definitely something you should keep in mind for bigger projects because what it allows
you is that you have files with only a few action creators in each file which makes it easier to find
that action creator you want it to change or check.
So this is why I chose that setup and it is something I wanted to show you for your bigger projects.