Time to see redux in action in a real project.
So I'm back in the burger builder in the state
we last left it at,
and now let's see where we can add some redux magic to it to make state management a bit easier. For
that,
in this first lecture, I want to analyze our existing project to find out which kind of state we might
want to manage
through redux. So let's dive into our containers because thankfully, we already have a structure where all
state management takes place in containers and therefore we don't need to dig through all the components,
it's really just state we manage in containers
we probably want to manage to relax in the future.
Let's start with the burger builder.
If we inspect the state in this burger builder class here, we see that we got the ingredients of the
burger we're currently building, price and then a couple of state fields
regarding the current status we have when it comes to purchasing that burger, for example purchasing
is a state we use if we scroll down to the render method, we use to conditionally show or hide that modal.
So here state.purchasing is used for that
with that orderSummary. Loading is used to display a spinner and error is also used here to render different
content.
So if we have a look at our state, we could argue that purchasing, loading and error are kind of
local UI state,
we use them here to determine whether we show a modal, whether we show an error message.
We could of course also manage that through redux and I won't say that this would be bad,
not at all, you can definitely manage everything through redux but there also might not be a necessity
to do so.
So what's definitely interesting to manage redux though is the ingredients and the total price of the
burger, purchasable,
if we have a look at where we use that, we can see that if we scroll down we passed purchasable to our
build controls and there to unlock the order button.
So if we inspect the burger build controls component and see what we do with the purchasable props
there, we use it to switch the button here,
the order now button from disabled to enabled and the other way around.
So this also is more the UI state,
we change something on the UI,
it might not be super important for us to manage that through redux, though
of course you could also say purchasable, the value it takes depends in the end on the burger we configured.
So we'll have to see where we add this,
definitely a redux case,
our ingredients and the total price though.
Let's have a look at checkout,
if you go to the check out component, there if we scroll up, we quickly see that we also have ingredients
and price here,
this already a strong case for using redux because here, we have that issue of passing the ingredients through
query params and that would be awesome if we can get rid of that.
It would also be awesome if we in the render method of the checkout component could change the way we
render this route so that we don't have to use this way just to get the ingredients to contact data, instead
once we do actually manage the ingredients state in our redux store, we can just render this component here
and in contact data, we can connect this through the connect higher order component to the redux store
so that we get the ingredients here
too because in the contact data component, if we have a look at the state, we of course got our order form,
all these controls and I want to leave them here because that again is local UI state,
we don't really need information about our form here anywhere else in the application
but we also of course do take advantage of the ingredients which we get through props, so we don't see
them in the state here.
So in the contact data, the state is really just all the UI state here handling the form but we get some
props here which we in the future might directly get from the redux store instead of passing them here
with this workaround we're currently using in the checkout container. Now in the orders component, there
we also have the orders in the state, now the orders are actually fetched from the server and we haven't
learned how to fetch data from a server, how to handle asynchronous actions as HTTP requests of course
are together with redux,
so orders is something I'll take a look at later once we had a closer look into how to handle asynchronous
code in redux too.
For now, let's focus on synchronous code and over the next lectures, let's implement redux, move our state to it and
connect our containers to redux.
Definitely feel free to move on on your own and then solve it together with me over the next lectures
but if you don't feel as comfortable yet, try your best, go as far as you know how to do things and then
we'll build this together.