So in the last module I showed you some ways of refactoring your reducers and I mentioned that these ways
or these methods are all optional and they are, still I want to employ them here to clean up this reducer
and make the switch case statement a little bit leaner I should say.
So for example I'll add my updateObject convenience method which makes updating objects like we do
for the entire state but then also the ingredients object here for example easier.
For that, let's quickly add a new function and I'll add it in the store folder, utility.js, that's
not written like that,
that's correct.
And now when there, I'll export a new constant which I'll name updateObject,
it's an arrow function
and in this function, I expect to get my old object and the updated properties or whatever you want to
call it, new properties, whatever it is,
and in there, it's the same function as I wrote in the last modules. So in there,
I'll simply return a new javascript object,
that's the whole idea behind that,
a new object, distribute the properties of the old object but then also distribute the properties of
updated properties which should be an object too.
Now I can use that updateObject function in my reducers
so I will import it at the top, import updateObject it's a named export so we need curly braces from
moving up the utility file
and now I can call updateObject whenever I have code like this, where I distribute some props.
So in this case here, I'll have my updatedIngredients first, that will now be a call to updateObject
where I pass state.ingredient, so the old ingredients,
so now I'm replicating this part and where I pass my new ingredients, this part.
So here I'll create my, a new constant just to have it split up over multiple lines and not set all of
that into one expression,
so here I'll have my updatedIngredient,
that should be a javascript object where I have just that key value pair, the dynamic name of the ingredient
and then the updated value which is incremented and then I'll pass this updatedIngredient as a second
argument to updateObject
and it has to be an object, updatedIngredient has to be an object because this is what the utility
function expects
otherwise this won't work as expected.
So with that, I have the updatedIngredients,
this is what I assign to ingredients now
but of course, the whole idea is that I also replace this part.
So I'll create a new constant which I'll name updatedState
maybe, this should be a javascript object where I now have my ingredients and total price, like that.
And in the end here, I can therefore then call updateObject, this and pass the old state which is the
object I want to update, I want to return here and pass the updated state.
So still a lot of lines, a little bit more structured and using that utility function
and I just wanted to show how to implement this,
we could have squeezed all of that into one line but that would have been a bit hard to follow along,
that is why I wrote it over multiple lines.
So now I'll copy all that code because when we remove ingredient, it's essentially the same story
but there of course, the difference is that we need to decrement our ingredient by one.
And even though it's in a switch case statement, it does like the fact that I reassign a constant here,
doesn't recognize that I can't reach this code.
So what I'll do is I'll simply rename these constants,
not ideal but unfortunately has to be done, updatedSt
maybe, so this is just again necessary due to the fact that the IDE doesn't pick up these constant, constants
can never be reassigned.
So with that, let's use updatedIngredients
here, so this new constant I just created and updatedIng here and then updatedState, down there.
Now for setIngredients, it's a bit easier, there
I also want to return a call to updateObject, so to the function we're importing,
I pass state of course and the second argument should be a javascript object where I now just copy
all the code I previously also passed to this new object.
So now I'm using my utility function here too to update the state and the same of course down here for
the error, there
I also want to call updateState, like this, updateObject I mean.
So as always updateObject
where I pass the state and then object where I set error to true, like this.
So that is the ingredient reducer updated with our utility function,
let's now do the same for that order reducer.
There I'll also import as a named export updateObject from the utility file which we can find one level
above our reducers folder and now I'll use updateObject here too.
So I'll return updateObject, pass the state and pass a javascript object where purchased is set to false,
you can remove this code here, the same here,
updateObject pass the state and an object where we set loading to false, like this,
remove that code.
And also when we get success case here, there we of course also want to update an object,
so here I will update an object where I pass the state of course and then all these things here as properties
of a javascript object, can get rid of the code thereafter.
And of course we update another object here, here
newOrder,
there we also update an object,
we get the action order data here as an object
and I want to pass a new property to it, the id which should be action order ID and with that, I can get
rid of this code here.
So now we got this using our updateObject function too
and we're nearing the end,
let's also do this for purchaseBurger, burger fail, fail, have the state here, loading set to false.
So there also using the updateObject function and I'll quickly duplicate this for fetch order start
except for data here,
as you see I want to set loading to true and for fetchOrderSuccess, I'll call updateObject also
pass the state and then I'll have orders and loading set to false as properties which I want to pass
as a javascript object, like that.
And now the last updateObject called down there for fetch orders fail,
there I'll pass the existing state which is to be updated and an object where I set loading to false.
Again all of that is optional
but it does re-use that utility function
and if you ever were to change the logic you use for updating an object, you only have to do it in one
place.
Now let's quickly see if that all works, loading does work,
managing the burger does seem to work
so that is all good, I guess.
Let's quickly go to the checkout page
so that's that's looking good,
seems to work.
What else can we do?
Let's have a look in the next lecture.