So we get an always spinning fetching process here
as you can see if you inspect the console, we don't have any errors but we also never get our ingredients
which makes sense because setIngredients which is dispatched once we got the ingredients is never handled
in our reducer,
so time to change this,
the same is true for FETCH_INGREDIENTS_FAILED
So in the burger builder file in the reducers folder, I know when to handle these two new cases.
So first of all, I'll add a case for actionTypes.SET_INGREDIENTS, this is executed whenever we got ingredients
from the server. There
I want to return a new state and I'll copy the old state first
for that reason and then I need to set my ingredients. Here,
ingredients should be set to action.ingredients and I know that I receive these ingredients because
in the burger builder action file where we have setIngredients, I do pass this ingredients property.
So now I initialize where I set my ingredients and theoretically, we could execute this action or dispatch
this action whatever we want,
so we could also execute this, set this with any set of ingredients with any javascript object representing
our ingredients at any point of time we want, for example to reset the current people
burger. Here however,
I just want to use it to initialize our ingredients.
Now with that, I call setIngredients,
I then also want to handle the other case that the fetching of ingredients failed, there
I will also return new state where I copy the old state and then I of course also need to set my error
here and I want to set it to true, so error
true.
Now one important thing, when we call set ingredients here, I want to set my error to false to reset it
in case we had an error earlier
and now don't have it anymore, so I'll set my error to
false here.
So with that, we added our reducer logic,
now we needed to connect our container,
so I'll head over to the burger builder file and there, at the bottom of this container,
we no longer only need the ingredients, we also need to get information about a potential error.
So here I want to get my error from state
and now there, the error property.
Keep in mind, thus far we have no different slices of state,
we only have one reducer,
we're not combining any.
So with that I have my error,
now one other thing we have is we never dispatch our initIngredients action,
this one which actually reaches out to the web,
we never dispatch this
so this will never get initialized.
So I also want to be able to dispatch that from the burger builder
So I'll add a new property here to mapDispatchToProps,
I'll name it
onInitIngredients and I'll dispatch my burger builder actions here and I need to add the burger builder actions
to the index.js file where I bundled them. Here,
I need to add
initIngredients.
So now, I can reach that from my burger builder container file, initIngredients and execute it.
Now the last step is to call onInitIngredients in our componentDidMount method here,
so there I will now execute this.props.onInitIngredients, like this and this should execute this, dispatch
this action and hopefully successfully fetch our ingredients.
Last but not least, we did add this error property to map it to our error state,
now of course I also need to use it and I can simply search for all occurrences of state.error
in my file here, these are the places where I need to use,
well except for mapStateToProps,
so this place here is the place where I now need to call this.props.error because now we're receiving
this as props. With that,
let's save all files and if we go back to our application, let's have a look if we got any errors if
we reload the app,
that looks good to me,
we got a burger here.
Let's now have a look at the redux dev tools, we see setIngredients was executed and did set up our
ingredients and now we can start adding ingredients again and we can also enter the order process here,
this is all working fine.
Last I want to check if error handling works,
so let me head over to my burger builder action creator and let's mess up this URL here,
let's save it
and this also still works as it should.
So this is great,
we can see error handling with our higher order components still works due to us using one and the same
axios instance
and now we can move on to the other places where we need to use asynchronous code.
The next place of course is when we want to order a burger.