So let's start working on the state for actually ordering a burger, right now if we have a look at our
containers,
we handle that inside our contact data container.
There we have the orderHandler method which is essentially executed when we submit this form we create in
this container here, and in this orderHandler we send the HTTP request, we set the state to loading initially
to show a spinner then we set it to false once we're done and then we navigate away.
We can do all of that in that container,
this is not per se wrong or anything like that but we can also outsource it to action creators and
redux and as so often, this is a choice that's left up to you.
But since you in theory could have an application where you also want to be able to submit this request
from other pages too, maybe putting it into a central place like the redux world is is a good idea,
so that is what we're going to do.
We're going to move that submit logic out of this contact data container into an action creator. Speaking
of that, for these changes,
I want to adjust my structure here
in the store folder.
I'l create an actions subfolder and I'll create a reducers subfolder and I'll move my actions.js file into
the actions folder and the reducer.js file into the reducers folder and
this of course will break the app for now since our import paths will be off.
I'll also rename the actions file to actionTypes because I want to have a set up shown as at the end
of last module, I want to have an actionTypes file where I simply export these identifiers and then
I'll create separate files for my different action creators.
That's actually the first thing I'll do here, I'll add an order.js file here which should hold the action
creators for submitting an order.
I also want to create a new reducer file,
I'll name it
order.js too and I'll rename the first reducer to burger builder since it holds code relevant to building
the burger only,
not just the ingredients but in theory to the whole building process
if we were to add more functionalities to it.
Again with that, our application will of course be broken.
I'll also add another file to the actions folder, the burgerBuilder.js file where I want to create
the action creators for building a burger and there, I'll only have synchronous action creators for adding
and removing ingredients but still I want to keep that action creator pattern throughout my application
here even though for synchronous action creators, it's not really necessary but it is a consistent approach I'm
taking here.
So with that, let's start working on all these action creators before we then start implementing the store handling
for orders.