Let's work on the total price which right now, we still store in the burger builder state but there
of course, we don't really update it,
therefore it's always four.
We already set it up in the reducer but we're not changing it here.
Now the price changes whenever we add or remove ingredients, now there are two routes you can take,
you can define a new action type for the price change,
you could call it update ingredients or update price. And then, we could also of course bind this in
the burger builder at the bottom to a property which we execute to dispatch this action and this action
would then simply be called by the reducer and then recalculate the price. This would be fine and it
would ensure that every action leads to just one piece of your state being manipulated in your reducer.
On the other hand, we already got the only two action types which change our price, add ingredient and
remove ingredient,
so it would also to be fair to not only update ingredients here but also update the price.
And again it's totally up to you which route you take,
do you only want to change one part of your state per case, then you need to extra action,
are you fine with manipulating multiple pieces of your state? Well then you can take one action, I'll
go with the latter route here.
So here we already update ingredients,
now we also want to recalculate the price. So I'll also overwrite total price here
when returning a new state, again we first of all copied all the old state and all the properties,
now I'm not only overwriting ingredients but also the old price and they are of course, the value
now is the state or the total price of the old state, I should say,
so the state we're receiving when this reducer is called and now adjust it by the price for the ingredient which
was added.
Now we get this price map for this in the burger builder, here
we got the ingredient prices, I'll copy that, or I'll cut it
actually, I don't need it here anymore and move it into my reducer.
So there I will now not only define my initial state but also my ingredient prices, we could define this anywhere
in our application, we could fetch this from a database or from a server, though
right now we couldn't because we don't know how to handle asynchronous code but in the future, we will
but I'll simply hardcode it in there.
And there again, we've got the same ingredient property names as we use everywhere in our application
so now we can simply set the total price equal to the old total price plus and now access the ingredient prices
for the ingredient we get here in our action, the ingredient name.
This will for example access salad here and give us .5 which is then added to the old price and
set as the new price here. This is how we can manipulate and update the price for adding ingredients, for removing
ingredients,
I'll copy that code and also add it to the remove ingredient case, to the state update,
there of course we deduct the price of the ingredient that we removed.
With that if we now save everything, we have to go back to the burger builder because we get some errors
down there that we still refer to that old code for updating the price, ingredient prices.
We do this in the ADD_INGREDIENT handler
and actually, what we can do now is we can get rid of the add and remove ingredient handler methods here,
cleaning up this file
a lot of course. Now with that, if we save that file, save all the files and go back to the application,
we should see that if we now,
let me shrink this little bit to bring it closer together,
if we now update salad and bacon, the price doesn't change,
why? Well because we now do update it in our global state through the reducer
but of course in the burger builder container at the bottom, we still only fetch the ingredients from our
global state, where we simply have to make sure to also fetch the price here.
So from state and there, the property was named total price. With that,
we can use price on the props in the burger builder container and we can also remove the total price
from the state there because we're not managing it through the state in the burger builder anymore.
So now let's simply use the total price there and everywhere in this part where we use the old total
price on the state, like here,
we should replace it, though for the purchaseContinueHandler,
I won't for now because I'll soon get rid of all this code anyways.
So let's go to the render method and let's make sure to update the price there,
here I want to update it on our build controls where we pass it,
we simply now pass this.props.price and in the orderSummary, where we also use the price, this should also
be this.props.price, like this, this should be all the places where we use the price.
Let's now save this component, go back to the application and start adding ingredients and you see that
we are updating the price now, of course in both directions.
Now one thing we still don't see is that the order now button won't get enabled,
so this is what we'll work on next.