1
00:00:02,270 --> 00:00:09,890
Well the one thing we can also do is we can extract the logic from our cases into their own functions

2
00:00:10,160 --> 00:00:13,100
so that our switch case statement becomes very short.

3
00:00:13,160 --> 00:00:18,940
So in the reducer here, I can add a new constant which I could name addIngredient,

4
00:00:19,010 --> 00:00:25,100
so basically the action type will handle, this is a function which receives the state and the action

5
00:00:25,100 --> 00:00:27,280
just like the reducer itself does

6
00:00:27,590 --> 00:00:30,870
but there I only want to handle this code.

7
00:00:31,070 --> 00:00:38,600
So I'll grab all the code from the case action types addIngredient, cut it and move it into addIngredient,

8
00:00:38,810 --> 00:00:40,540
as shown in last module.

9
00:00:40,730 --> 00:00:44,620
The code is the same since we still access state and action in there

10
00:00:44,780 --> 00:00:55,290
now in my case here, I therefore only have to return addIngredient and pass on the state and action

11
00:00:55,290 --> 00:01:02,490
we get in the reducer and this does essentially the same as before then but now in line, which of course

12
00:01:02,490 --> 00:01:06,600
is a super quick way of seeing all the cases we're handling.

13
00:01:06,750 --> 00:01:11,780
And obviously I don't just want to do this for addIngredient, I want to do that for removeIngredient

14
00:01:11,780 --> 00:01:12,190
too,

15
00:01:12,230 --> 00:01:18,840
so let's create a function removeIngredient, an ES6 arrow function again and again, we'll just cut

16
00:01:19,170 --> 00:01:26,200
the code from the removeIngredient case here including the return statement of course and since we

17
00:01:26,200 --> 00:01:31,930
return this here in the function, we can just execute the function and return the result here which

18
00:01:31,930 --> 00:01:33,320
will be the updated state,

19
00:01:33,340 --> 00:01:41,000
so removeIngredient is executed here and we pass state and action, just like with addIngredient.

20
00:01:41,050 --> 00:01:45,030
So with that, we get these two functions outsourced into that,

21
00:01:45,130 --> 00:01:46,830
now the same for setIngredients

22
00:01:46,860 --> 00:01:56,470
of course, there I'll also catch the entire code and create a new function setIngredients, as always expect

23
00:01:56,470 --> 00:02:01,580
state and action here and then paste in the code, like this

24
00:02:02,530 --> 00:02:11,190
and in the case here, I can then return setIngredients and pass state and action as well.

25
00:02:11,550 --> 00:02:16,770
And last but not least we do the same for fetchIngredientsFailed,

26
00:02:16,770 --> 00:02:24,120
of course that's a very short one but still fetchIngredientsFailed also takes state and action as

27
00:02:24,120 --> 00:02:28,170
input and will then just returned the updated state

28
00:02:28,170 --> 00:02:36,660
so here, we can simply call this, not this, return fetchIngredientsFailed and pass on state and action, that's

29
00:02:36,660 --> 00:02:37,850
important.

30
00:02:37,980 --> 00:02:40,940
And with that, we return a state for the default,

31
00:02:41,010 --> 00:02:47,020
we got a super lean reducer which still should of course do its job

32
00:02:47,520 --> 00:02:49,750
and it does, as you can see.

33
00:02:49,800 --> 00:02:53,310
So the idea behind this of course is not to shrink our file,

34
00:02:53,340 --> 00:02:59,190
it's as long as before, even a bit longer but the switch case statement is much leaner and we can quickly

35
00:02:59,190 --> 00:03:01,450
see which cases are handled in the reducer

36
00:03:01,590 --> 00:03:04,050
and that's the whole idea behind that.

37
00:03:04,110 --> 00:03:07,850
Now we can of course do the same for the order reducer,

38
00:03:08,130 --> 00:03:16,080
so there I'll also add a function, purchaseInit where I get a state and an action where I return something

39
00:03:16,590 --> 00:03:23,970
and or I don't do yet but I do now because I cut the code from the purchaseInit case and put it

40
00:03:24,660 --> 00:03:32,460
without any changes into purchaseInit just like before and then return purchaseInit here, for this

41
00:03:32,460 --> 00:03:38,580
case just as in the burger builder, where I also always returned these function calls and the result of

42
00:03:38,580 --> 00:03:41,160
the function calls to be precise.

43
00:03:41,160 --> 00:03:50,240
Now for the order reducer, I'll therefore also create a function for purchaseBurgerStart where I get state

44
00:03:50,250 --> 00:04:02,410
and action where I will then also quickly put in the code of that case like that and therefore, return

45
00:04:02,470 --> 00:04:06,730
the call or the result of the call to purchaseBurgerStart.

46
00:04:06,820 --> 00:04:09,610
The same obviously for purchaseBurgerSuccess.

47
00:04:09,610 --> 00:04:11,510
There we got a little bit more code,

48
00:04:12,010 --> 00:04:19,360
so const purchaseBurgerSuccess is a good function name, it takes the state and action as always

49
00:04:19,360 --> 00:04:21,150
and then there, we put the code

50
00:04:21,160 --> 00:04:24,490
we just cut out off our switch case statement.

51
00:04:24,670 --> 00:04:28,310
So now let's simply return to the result of a function call

52
00:04:28,480 --> 00:04:33,400
and one thing I did forget of course, all these function calls require state and action

53
00:04:33,400 --> 00:04:35,770
since we do expect that here as an argument,

54
00:04:35,950 --> 00:04:39,550
so of course, I should add state and action to all these function calls

55
00:04:39,550 --> 00:04:43,090
in my switch case statement. With that, let's continue,

56
00:04:43,210 --> 00:04:47,270
let's do the same for purchaseBurgerFail and all the other functions.

57
00:04:47,380 --> 00:04:55,150
Of course you may skip ahead in case you don't want to do that, so purchaseBurgerFail state and action

58
00:04:56,010 --> 00:04:56,450
and there

59
00:04:56,450 --> 00:04:58,450
too, let's put it in the code

60
00:04:58,450 --> 00:05:08,670
we cut out and let's then simply return purchaseBurgerFail and there pass state and action to the

61
00:05:08,670 --> 00:05:09,430
function.

62
00:05:09,810 --> 00:05:13,110
And the same for fetchOrdersStart of course,

63
00:05:13,110 --> 00:05:22,160
so const fetchOrdersStart, you see refactoring such a reducer can be a bit cumbersome but obviously

64
00:05:22,160 --> 00:05:26,890
I want to show you how to do this entirely and not just for one function.

65
00:05:26,960 --> 00:05:33,470
So here, we'll also return the result of fetchOrdersStart after passing state and action to it.

66
00:05:34,620 --> 00:05:38,780
Now we got fetchOrdersSuccess, a little bit more code again,

67
00:05:39,630 --> 00:05:45,050
let's cut it out and create a new function,

68
00:05:45,120 --> 00:05:55,320
fetchOrdersSuccess also receives state and action and then, we put in the code we just cut out and as before, simply

69
00:05:55,320 --> 00:06:02,890
return a call to fetchOrdersSuccess, the newly created function and pass state and action to it. And with that,

70
00:06:02,900 --> 00:06:06,450
we're almost done, one more to go fetchOrdersFail.

71
00:06:06,480 --> 00:06:15,390
So there let's have our constant fetchOrdersFail also receive state and action here, return something,

72
00:06:15,390 --> 00:06:20,240
return a code we just cut out and let's call fetchOrdersFail for this case

73
00:06:20,430 --> 00:06:25,840
so we returned a result of that call here too, state, action like this.

74
00:06:25,980 --> 00:06:29,130
Let's put the state for the default statement in the same line

75
00:06:29,130 --> 00:06:34,280
and now, we get a lean switch case statement for this reducer too.

76
00:06:34,680 --> 00:06:40,320
With that, let's go through our burger builder here one more time to really see if that's all working.

77
00:06:40,560 --> 00:06:42,400
Let's order a delicious burger,

78
00:06:42,630 --> 00:06:43,990
just input anything,

79
00:06:44,020 --> 00:06:44,790
doesn't really matter,

80
00:06:44,790 --> 00:06:52,380
Just want to see if we got any state issues at any of our containers, so let's click order here,

81
00:06:52,740 --> 00:06:54,910
we are redirected.

82
00:06:55,290 --> 00:07:02,200
And on the orders, we see all the orders including the one we just pulled together,

83
00:07:02,460 --> 00:07:03,840
let's also try something else.

84
00:07:03,840 --> 00:07:08,060
Let's start pulling a burger, cancel, that works, continue,

85
00:07:08,100 --> 00:07:13,910
let's go back to the burger builder, we reset as wanted, we can go to orders

86
00:07:13,970 --> 00:07:19,080
let's now continue one more time. So that all seems to work

87
00:07:19,150 --> 00:07:26,260
and with that, we implemented some advanced redux techniques into our burger builder application.

88
00:07:26,260 --> 00:07:31,850
Now definitely feel free to enhance this even more by making the orders deleteable

89
00:07:31,900 --> 00:07:37,960
as I said or viewable that you have a details page for each order, whatever you want.

90
00:07:37,960 --> 00:07:43,220
I like the application as it is right now though, we implemented a lot of cool features,

91
00:07:43,270 --> 00:07:45,790
a lot of react and redux stuff.

92
00:07:46,090 --> 00:07:53,340
And with that, I feel very comfortable to move ahead and implement authentication in the next lectures.