1
00:00:02,500 --> 00:00:09,410
In the last lecture, we already used our utility function update object to make our reducers leaner

2
00:00:09,710 --> 00:00:11,510
by outsourcing a common step

3
00:00:11,510 --> 00:00:15,770
we repeated all over the place into a utility function.

4
00:00:15,770 --> 00:00:23,870
Now our reducer cases actually are pretty lean with that, in the counter reducer they can't get much leaner.

5
00:00:24,580 --> 00:00:30,240
In the result reducer, we at least have one of the cases with an extra step where we update the

6
00:00:30,240 --> 00:00:31,160
array.

7
00:00:31,640 --> 00:00:37,720
Some developers not all of them but some like to have very lean cases where you essentially have case,

8
00:00:37,850 --> 00:00:40,750
colon and then one function you call,

9
00:00:40,850 --> 00:00:47,640
obviously we still need to run our logic but they like to outsource this into a function, so that the

10
00:00:47,660 --> 00:00:49,490
switch case statement is very lean.

11
00:00:49,520 --> 00:00:54,960
This has one major advantage, if a switch case statement looks like in the counter reducer,

12
00:00:55,100 --> 00:01:00,650
we can quickly see what happens in each reducer or at least where we handle something.

13
00:01:00,710 --> 00:01:08,300
So we see all cases on one page so to say. For the result.js file, that would mean that we can

14
00:01:08,330 --> 00:01:11,920
outsource this logic here into its own function,

15
00:01:12,110 --> 00:01:14,660
that function goes into the same file.

16
00:01:14,870 --> 00:01:20,100
So there I will simply add a new function outside of the reducer function

17
00:01:20,110 --> 00:01:24,060
obviously and I will name it deleteResult

18
00:01:24,160 --> 00:01:25,110
.

19
00:01:25,220 --> 00:01:32,270
The convention should be to use the action type as the name, though not in all caps but in camel case.

20
00:01:32,450 --> 00:01:38,150
So deleteResult and there I get my state and I need to get my action,

21
00:01:38,150 --> 00:01:41,880
so essentially the same data I get in the reducer.

22
00:01:41,930 --> 00:01:48,580
Now here I wanted to use ES6 arrow function syntax, so I'll do that

23
00:01:48,960 --> 00:01:54,400
and in this function, I now basically execute what I did before in the switch case statement.

24
00:01:54,620 --> 00:02:02,300
So in my case, I'll update the array, I'll put that method in there or that code in there, into the deleteResult

25
00:02:02,300 --> 00:02:04,040
function.

26
00:02:04,080 --> 00:02:10,530
Now in the end, here in this function I of course need to return the updated state still

27
00:02:10,760 --> 00:02:18,950
so I will also grab that code from my deleteResult case and call updated object with the state

28
00:02:19,190 --> 00:02:23,270
and then basically doing the same as I did before in the switch case statement,

29
00:02:23,540 --> 00:02:26,320
and that's exactly the idea behind this helper functions.

30
00:02:26,360 --> 00:02:31,930
You put your old code into them and then, I can just call deleteResult and return that here.

31
00:02:32,090 --> 00:02:34,750
So since deleteResult returns map to that object,

32
00:02:34,760 --> 00:02:38,100
I can simply return deleteResult here,

33
00:02:38,150 --> 00:02:39,410
just calling it like this

34
00:02:39,410 --> 00:02:44,780
and of course I have to pass on this state and action because both is needed in that function.

35
00:02:46,280 --> 00:02:52,490
With that we got a leaner reducer here too, let me remove the comments, doesn't get leaner than that,

36
00:02:52,490 --> 00:02:58,100
we can now also write the inline next to the colon if we wanted to, to have it really lean and only have

37
00:02:58,100 --> 00:02:59,950
one case per line.

38
00:03:00,170 --> 00:03:01,600
And this is all optional,

39
00:03:01,670 --> 00:03:07,700
it is a way of creating very lean switch case statements though which make it easy to see which cases

40
00:03:07,700 --> 00:03:12,660
you're handling in a given reducer and that can be the advantage of this approach.