We prepared our folder structure,
let's now create these action creators and I'll start in the burger builder because that's the functionality
we in theory already have
and I want to unbreak my app again.
So in here, I first of all need to import my action types
so in the burger builder file in the actions folder, here I'll navigate to /actionTypes referring
to that javascript files in the actionTypes javascript files. And then I'll export a constant which I'll call
addIngredients
following that pattern of naming my action creators just as the identifiers
but not all caps with underscores but in camel case.
So addIngredient is the action creator
for yes you guessed it, adding an ingredient
and if we inspect the place where we actually dispatch such an action, which is in the burger builder
container, there we will see that if we scroll to the bottom, on ingredient added passes us the name
of the ingredient as a payload.
So we have this extra ingredient named property
and I want to keep that in my action creator or in the action created in the action creator, I should
say, so that the existing code in all the other places, for example the reducer doesn't break.
So we need to set up this ingredient name and we can expect to get that ingredient name as an input
to the action creator for that reason.
So addIngredient is an arrow function where I actually received the name of ingredient which should be
added and where I then will return a javascript object which will have this ingredient name property
where I assigned a name I get,
and of course we have that mandatory type property where I reach out to my actionTypes and pick
addIngredient. And now, I'll simply duplicate this action creator to create a second one,
this one will be called removeIngredient
and here, if we have a look at the burger builder again, we also received the ingredient name of the ingredient
where we want to remove one so I can also, where I should also accept this name here and basically emit
or dispatch return the same action as for addIngredient, just change the identifier, the type to remove
ingredient and that's the burger builder action file finished,
now we can use these action creators. For our app to not break,
we also have to go into the reducers file though and there, we have to update our import path where we
get our actionTypes.
It's no longer /actions,
instead we have to go up one folder into the actions folder and then pick the action types file there,
again as always omitting the file extension. With that, the reducer file is prepared too,
obviously we still need to update our store where we create it, where we point to the reducer because
we moved the reducer into a subfolder.
So in the index.js file, we no longer import reducer from the store folder,
instead there we have to go into the reducers folder and then pick the burger builder.
Soon I'll combine all reducers
but right now I only got one, the burger builder here, so I'll name this burger builder reducer
and for now, that's my only reducer, so I'll pick this and pass it to create store.
Last but not least I have to update my burger builder container where I map my state, here where I dispatch
actions,
I no longer dispatch them directly,
instead I want to use my action creators. So I'll go all the way up to the top where I import my action
types and I no longer do that,
instead I'll import my actions or maybe my burger builder actions
if we want to be super precise about the name, the name of course is up to you, from
and now I'll again navigate into the store folder and there to actions and now I want to have one central file
from which I can import,
so I'll name it
index.js
in the actions folder.
and there, just as shown in the last module,
I want to group my exports. So I'll export everything from ./BurgerBuilder and the same
later on from the order.js file and what I want to export from burger builder is of course
addIngredient and removeIngredient and I just structured it over multiple lines to make it very easy
to read, like this.
So now with that index.js file existent, I can go back to the burger builder container and
adjust my import to point to actions index.
Actually due to our workflow set up here, you can even omit index,
it will automatically pick the index.js file
if you point at a folder, but I'll be very clear and add it, but again index could be omitted here.
With that, I got that burger builder actions object in the burger builder container file and I can
use that at the bottom of the file where we dispatch actions here to dispatch the addIngredient action
and important,
we have to pass on our ingredient name to the function we're calling here
and of course I also want to execute an action here.
So burger builder actions, removeIngredient and pass on the ingredient name here
too. These are the two actions I want to dispatch, with that we can save that file
and if all files have been saved, the application now should work again.
We can actually check this out, in the running application,
if we start adding burgers again,
ingredients excuse me and removing them, we should see that it works just as before
but now of course, with the help of our action creators. So that's the first step, we move towards this action
creators set up,
we of course did this to run asynchronous code though, so that will be the next steps,
adding action creators for orders, so that we ultimately can handle the whole ordering process through redux.