So let's start by setting loading to true when we start fetching a burger, for that I need a new action
type, I'll add it to my action types folder, file excuse me and I'll name it PURCHASE_BURGER_START
and that will also be my identifier.
Now I'll create an action creator for this,
we have one which is named like this
but this has our async code and therefore doesn't return an action, so I'll
actually refactor this
and I'll add a new action creator.
This one I'll name purchaseBurgerStart and the old one I'll rename to just purchaseBurger. Now in purchase
BurgerStart
I don't expect any arguments and all I want to do is I want to return a javascript object where the type is
set to actionTypes.PURCHASE_BURGER_START so that I can handle this in redux because this being a
async normal action reaches redux which has the reducer.
Now I renamed this to purchaseBurger so we'll have to take care about this in the index.js file
where we export it, we export purchaseBurger now.
And now in the order.js file still when I dispatch this, before I sent my post request,
I want to execute purchaseBurgerStart, this function to dispatch this action right at the start.
Of course I don't want to execute it like this
I want to execute it wrapped in a dispatch so that the action returned by purchaseBurgerStart is dispatched
to the store. With that,
I need to work on contact data because there, I still dispatch purchaseBurgerStart and I should dispatch
purchaseBurger instead.
Additionally there is an error in this function here where we get dispatch,
we of course should return a map of props to functions,
so this part here has to go into the return javascript object, like that.
Now with this we should have our action connected,
we can now go back to redux, to the reducer and also handle the case that we just started,
This new action we added a second ago,
so I'll add a new case here,
the position doesn't matter but I'll add it at the top
and here I'll name this actionTypes.PURCHASE_BURGER_START and there, I want to return a javascript object
as always, we'll copy the old state
to keep my old orders but set loading to true. With that we switch loading,
we of course now have to make sure that the contact data container, we get loading from our state
now, from redux because we're using loading in there to show the spinner and right now, we're referring
to state loading,
well that is something we don't need anymore in the state of this container,
I'll leave all the controls but i'll actually get rid of the loading property there.
Instead in mapStateToProps, I'll add the loading prop and map it to state,
and now we can reach out to loading but actually we'll soon combine our reducers so we will have to
change to see this soon to take the slice of that reducer, of the order reducer here in mapStateToProps
in the contact data container.
So for now, I'll leave it like this but we'll soon change it, with the loading prop made available here,
I of course should reach out to this props loading here and not this state loading, let's check if we got
any other this.state.loading places,
no we haven't.
The last step is in the same file, in the contact data container to also use mapDispatchToProps and add it
to the connect function, pass it as a second argument
so that this really is considered by react-redux.
So with that all saved, nothing would work,
if we go back, we see that we have a problem here,
we're trying to fetch ingredients and this doesn't work and we also will never be able to
reach our other state here,
the order state because we're not combining any reducers.
So let's fix this error first and let's then start working on combining reducers.