In our application we can update the price that's fine, we can update the ingredients but the order now burton never
gets unlocked,
The reason for this is that the property determining whether this is unlocked or not is the purchasable
property we're setting on the build controls,
we can verify that by simply diving into build controls,
there we see the button is disabled
if props.purchasable is false.
So what we need to do is update the purchasable prop whenever our ingredients change.
In the burger builder, we thus far managed purchasable in the state,
now we can remove it from there,
I don't want to manage it here anymore and therefore I can also remove the update purchase state method.
Though,
for now I want to leave it here because we have that nice logic for determining when to update this
here. We now have two options,
we could leave the method and simply adjust it a tiny bit to return the result of our boolean check
here,
so of sum greater 0 and we still calculate the sum here with ingredients we pass to update purchase
state.
We could then go down to our render method
and there where we passed purchasable, we could simply not reach out to our state purchasable property
because we don't have that anymore
but to our update purchase state method which now simply returns true or false and return the result
of this function call,
so we could call this update purchase state here,
here we need to execute this because we want to execute this whenever this gets re-rendered so that
we fetch the updated result and there, we now need to pass our ingredients as an argument,
we can simply pass this.props.ings.
Alternatively of course, we could also get our ingredients through this property here directly update
purchase state by not expecting an argument but accessing this.props.ings
here, it's in the same class after all. If we do this and save everything,
now you see the button gets enabled and disabled again because now, we constantly get the information whether
purchasable is true or false
through this method. This is one way of doing this and
it's absolutely fine because you could consider this local UI state,
you could of course also say no this is something I want to manage in my redux state
and you always have edge cases like this and often times there is no clear right or wrong, use whichever feels
easier to you, which makes your application better to you.
So you could of course also manage the purchasable state in your, well through your reducer by adding something
like purchasable and then also update this whenever the ingredients change.
Now I'll stick to the approach I just showed by having the update purchase state method in the burger
builder and calling it from our jsx render method
but I wanted to bring to our attention that you can use both.
With that though, we do a lot about our ingredients and you see our state shrank a lot,
we now only have purchasing, loading and error in there
and as mentioned at the beginning of this module, these are all states or state properties relevant
for our UI state only, should we display a modal, should we display an error message,
nothing we necessarily need to manage through our global redux store,
so that is why I will leave them here.
They can co-exist together with redux,
you can put everything into redux but you don't have to.