Well the one thing we can also do is we can extract the logic from our cases into their own functions
so that our switch case statement becomes very short.
So in the reducer here, I can add a new constant which I could name addIngredient,
so basically the action type will handle, this is a function which receives the state and the action
just like the reducer itself does
but there I only want to handle this code.
So I'll grab all the code from the case action types addIngredient, cut it and move it into addIngredient,
as shown in last module.
The code is the same since we still access state and action in there
now in my case here, I therefore only have to return addIngredient and pass on the state and action
we get in the reducer and this does essentially the same as before then but now in line, which of course
is a super quick way of seeing all the cases we're handling.
And obviously I don't just want to do this for addIngredient, I want to do that for removeIngredient
too,
so let's create a function removeIngredient, an ES6 arrow function again and again, we'll just cut
the code from the removeIngredient case here including the return statement of course and since we
return this here in the function, we can just execute the function and return the result here which
will be the updated state,
so removeIngredient is executed here and we pass state and action, just like with addIngredient.
So with that, we get these two functions outsourced into that,
now the same for setIngredients
of course, there I'll also catch the entire code and create a new function setIngredients, as always expect
state and action here and then paste in the code, like this
and in the case here, I can then return setIngredients and pass state and action as well.
And last but not least we do the same for fetchIngredientsFailed,
of course that's a very short one but still fetchIngredientsFailed also takes state and action as
input and will then just returned the updated state
so here, we can simply call this, not this, return fetchIngredientsFailed and pass on state and action, that's
important.
And with that, we return a state for the default,
we got a super lean reducer which still should of course do its job
and it does, as you can see.
So the idea behind this of course is not to shrink our file,
it's as long as before, even a bit longer but the switch case statement is much leaner and we can quickly
see which cases are handled in the reducer
and that's the whole idea behind that.
Now we can of course do the same for the order reducer,
so there I'll also add a function, purchaseInit where I get a state and an action where I return something
and or I don't do yet but I do now because I cut the code from the purchaseInit case and put it
without any changes into purchaseInit just like before and then return purchaseInit here, for this
case just as in the burger builder, where I also always returned these function calls and the result of
the function calls to be precise.
Now for the order reducer, I'll therefore also create a function for purchaseBurgerStart where I get state
and action where I will then also quickly put in the code of that case like that and therefore, return
the call or the result of the call to purchaseBurgerStart.
The same obviously for purchaseBurgerSuccess.
There we got a little bit more code,
so const purchaseBurgerSuccess is a good function name, it takes the state and action as always
and then there, we put the code
we just cut out off our switch case statement.
So now let's simply return to the result of a function call
and one thing I did forget of course, all these function calls require state and action
since we do expect that here as an argument,
so of course, I should add state and action to all these function calls
in my switch case statement. With that, let's continue,
let's do the same for purchaseBurgerFail and all the other functions.
Of course you may skip ahead in case you don't want to do that, so purchaseBurgerFail state and action
and there
too, let's put it in the code
we cut out and let's then simply return purchaseBurgerFail and there pass state and action to the
function.
And the same for fetchOrdersStart of course,
so const fetchOrdersStart, you see refactoring such a reducer can be a bit cumbersome but obviously
I want to show you how to do this entirely and not just for one function.
So here, we'll also return the result of fetchOrdersStart after passing state and action to it.
Now we got fetchOrdersSuccess, a little bit more code again,
let's cut it out and create a new function,
fetchOrdersSuccess also receives state and action and then, we put in the code we just cut out and as before, simply
return a call to fetchOrdersSuccess, the newly created function and pass state and action to it. And with that,
we're almost done, one more to go fetchOrdersFail.
So there let's have our constant fetchOrdersFail also receive state and action here, return something,
return a code we just cut out and let's call fetchOrdersFail for this case
so we returned a result of that call here too, state, action like this.
Let's put the state for the default statement in the same line
and now, we get a lean switch case statement for this reducer too.
With that, let's go through our burger builder here one more time to really see if that's all working.
Let's order a delicious burger,
just input anything,
doesn't really matter,
Just want to see if we got any state issues at any of our containers, so let's click order here,
we are redirected.
And on the orders, we see all the orders including the one we just pulled together,
let's also try something else.
Let's start pulling a burger, cancel, that works, continue,
let's go back to the burger builder, we reset as wanted, we can go to orders
let's now continue one more time. So that all seems to work
and with that, we implemented some advanced redux techniques into our burger builder application.
Now definitely feel free to enhance this even more by making the orders deleteable
as I said or viewable that you have a details page for each order, whatever you want.
I like the application as it is right now though, we implemented a lot of cool features,
a lot of react and redux stuff.
And with that, I feel very comfortable to move ahead and implement authentication in the next lectures.