In the last lecture, we already used our utility function update object to make our reducers leaner
by outsourcing a common step
we repeated all over the place into a utility function.
Now our reducer cases actually are pretty lean with that, in the counter reducer they can't get much leaner.
In the result reducer, we at least have one of the cases with an extra step where we update the
array.
Some developers not all of them but some like to have very lean cases where you essentially have case,
colon and then one function you call,
obviously we still need to run our logic but they like to outsource this into a function, so that the
switch case statement is very lean.
This has one major advantage, if a switch case statement looks like in the counter reducer,
we can quickly see what happens in each reducer or at least where we handle something.
So we see all cases on one page so to say. For the result.js file, that would mean that we can
outsource this logic here into its own function,
that function goes into the same file.
So there I will simply add a new function outside of the reducer function
obviously and I will name it deleteResult
.
The convention should be to use the action type as the name, though not in all caps but in camel case.
So deleteResult and there I get my state and I need to get my action,
so essentially the same data I get in the reducer.
Now here I wanted to use ES6 arrow function syntax, so I'll do that
and in this function, I now basically execute what I did before in the switch case statement.
So in my case, I'll update the array, I'll put that method in there or that code in there, into the deleteResult
function.
Now in the end, here in this function I of course need to return the updated state still
so I will also grab that code from my deleteResult case and call updated object with the state
and then basically doing the same as I did before in the switch case statement,
and that's exactly the idea behind this helper functions.
You put your old code into them and then, I can just call deleteResult and return that here.
So since deleteResult returns map to that object,
I can simply return deleteResult here,
just calling it like this
and of course I have to pass on this state and action because both is needed in that function.
With that we got a leaner reducer here too, let me remove the comments, doesn't get leaner than that,
we can now also write the inline next to the colon if we wanted to, to have it really lean and only have
one case per line.
And this is all optional,
it is a way of creating very lean switch case statements though which make it easy to see which cases
you're handling in a given reducer and that can be the advantage of this approach.