Now with the actions reducers set up, at least the basics about it and our store connected to the
application,
let's fill our reducer with some life.
And in the end we have to have the two actions we set up here,
adding ingredients and removing ingredients.
Therefore as always, I'll add my switch statement introducer and switch the action type,
keep in mind you always have to have a type property on your action
this is why we can safely access it here.
Now we get two types we want to handle in our case statements,
the first one is the actionType.ADD_INGREDIENT where we want to return some object which holds the new
state,
the second one is the case where we have our action types and there, remove ingredient
and here too, we want to return some store or some state object. And finally, we always want to return
just state, in case we make it into none of these cases though here in my ID due to linting complains
that we should have a default state, a default handler I mean,
so let's simply add default to our switch statement and return to state here.
This will be reached if none of the cases applies,
again, we don't need break statements because we return in each case anyways, so the code execution won't
continue in this function.
Now to add ingredients, we of course want to add it our ingredients object,
now here we started with null
but keep in mind that the burger builder, we start with null because in componentDidMount, we actually load our ingredients,
our starting ingredients from the internet.
This is something I will really re-add but for now, since we haven't learned how to handle asynchronous
code here, I will ignore this here, will basically comment out the code in componentDidMount and instead
start with my own ingredients set up here in the state. So here, ingredients will not be null
in my reducer
but instead be an object where we have salad 0, bacon 0, cheese 0 and meat 0,
again, this is just a temporary reversal.
Now when we add an ingredient, we of course need to get the information which ingredient that is and
for that given ingredient, we then simply need to add one. So we don't need to get the amount because it's
always plus one
but we need to know which ingredient it is.
So what we we'll do here is first of all, we'll copy the entire old state with the spread operator, so that
when we set new ingredients we also keep any other properties around by distributing them over this
new javascript object first.
But that then is the second thing we want to do
set the ingredients to something new, ingredients should now also be a new javascript object,
immutability, don't reuse the old one,
create a new one, where I first of all distribute all properties of state ingredients.
Again doing this to really create a new object, just distributing state here won't do that because it
doesn't create deep clones of objects,
it doesn't go into objects and create new objects for these too,
it simply just copies the surrounding object but ingredients which is object on its own would still
point to that old object while we fix this by spreading out the properties of that old object into a
new object here.
Now with that in this new ingredients object, we want to overwrite the given ingredient which we need
to get as a payload of this action.
Now in ES6, there is this special syntax you can use to dynamically overwrite a property in a given
javascript object,
you can use square brackets, now
this does not create an array here.
Instead here, you can now pass a variable over a something which contains the name you actually want
to use as a property name and I expect to get that property name on my action,
maybe on a ingredient name property. Now ingredient name is something we get as a payload to the action
and then here, we simply distribute all ingredients into our new object,
So this object then holds salad, meat
bacon and cheese and one of these,
which ever that is which we receive as a payload of the action will receive a new value.
We target it with this syntax and then with colon and the new value,
well we set this new value, the new value now simply is state.ingredients then again select the given
ingredient name, so this now factors the old value for that ingredient,
so like 0 or 1 or whatever it was and then we add plus one.
So now here, we get the number of the old ingredients, add one and assign this to this ingredient where
we overwrite the copy we created here.
Now we're returning a new version of the state with the updated ingredients.
So that is how we add an ingredient,
how do we remove one?
Well for removing,
I also want to create a new version of my state where I simply decrement one ingredient by one
and for that, we can of course start by copying that code here from the ADD_INGREDIENT logic,
we still copy the old state and then, I distribute the ingredient properties into this new ingredients object
I take the ingredient I receive as an action payload for this case here too
but now, I don't add one,
I remove one. And with that, we got a reducer which should be able to update our ingredients,
it won't update the price right now,
we'll take care about this later,
but we will update our ingredients here.
Now with that in the next lecture, I obviously want to connect this to my burger builder
so that we use that reducer and these actions to managing the ingredients we add to our burger or remove from
it.