We worked a bit on the order reducer and the order actions
and before we even combined our reducers, we get an error when visiting contact data like this on
the checkout page.
The reason for this is that on the checkout page in the checkout summary, we of course show a preview
of our burger with the ingredients we have
and initially before we loaded the ingredients, ingredients is null and therefore it fails if we try
to loop through our ingredients.
Now there are a couple of ways of solving this, an
easy way is to simply not load
the checkout summary if ingredients aren't loaded yet, we can either show a spinner until they are there
but since in our application at least, the only time when the ingredients are not there is at startup,
we could also simply redirect the user if no ingredients are loaded because if no ingredients are there,
well then it doesn't make any sense to be on a checkout page.
So that is the route I'll take here but be aware that you could of course also show a spinner instead
of the summary here
if you wanted to do that.
So what I'll do is I'll import something from react router dom and that's going to be the redirect component.
We saw that in the routing section and in the render method, I'll create a new constant summary and this
summary by default should be the redirect,
let's say.
So here, I'll redirect and I'll simply redirect to slash,
so to my root page, to the burger builder. On the burger builder page, I have a loader as long as no ingredients
were loaded.
Now the summary should of course not be redirecting,
if instead this.props.ings,
so ings, the ingredients is available, we get that from our redux state and it is available once it has
been loaded.
Once that is the case, I of course want to render and therefore this should not be a concept but a variable
with Let,
I want to render the summary we showed before
So I'll put the summary code in there.
Now we can use that summary variable and output it here
so I'll simply output summary.
And we also don't need to show the route to the contact data
so I can simply put this into my checkout, in my summary code here to wrap it with the div due to having
adjacent elements here
and that actually also allows me to just get rid of the div here and just return summary, which either is
simply a redirect or the code we previously saw.
Now if I save that updated checkout container, you see if I go to the checkout page by clicking on
order now, this all works but if I reload it by just hitting enter or refresh, I'm redirected.
So this is the error fixed with this tiny adjustment,
now let's make sure that we actually combine our reducers.