1
00:00:02,230 --> 00:00:10,120
So over this module, you learned a lot about the advanced things you can do with redux especially action

2
00:00:10,120 --> 00:00:17,000
creators and middleware are key things since they allow us to run async code when dispatching our actions.

3
00:00:17,030 --> 00:00:22,070
Now I want to dive into advanced reducers set ups,

4
00:00:22,150 --> 00:00:23,640
right now we have two reducers,

5
00:00:23,680 --> 00:00:30,340
it's a bit advanced because we already split it up and use combined reducers but each reducer still has

6
00:00:30,340 --> 00:00:37,150
a relatively long switch statement and even when breaking up your reducers into multiple files, you probably

7
00:00:37,150 --> 00:00:43,060
still have relatively long switch case statements for each reducer, at least if it handles more than two

8
00:00:43,060 --> 00:00:44,160
actions.

9
00:00:44,620 --> 00:00:48,730
So cleaning up that reducer file a bit more can be an idea

10
00:00:48,850 --> 00:00:51,630
and I say can be, it's not a must,

11
00:00:51,700 --> 00:00:52,990
it's optional

12
00:00:52,990 --> 00:00:55,500
it's a good practice I'd say

13
00:00:55,660 --> 00:00:57,820
but you don't have to do it.

14
00:00:57,880 --> 00:01:03,970
I want to show you some ways of cleaning up this reducer step by step though to end up with a very

15
00:01:03,970 --> 00:01:05,800
clean reducer,

16
00:01:05,800 --> 00:01:08,270
again what I show you is optional though.

17
00:01:08,680 --> 00:01:12,950
So the first thing we can do is related to immutability,

18
00:01:13,330 --> 00:01:18,740
we constantly update an object here in the end whenever we return a new state,

19
00:01:18,940 --> 00:01:26,470
what we do is we just return an updated object, we return an object which copies the properties of the

20
00:01:26,470 --> 00:01:30,570
old state and then replaces one of the properties.

21
00:01:30,910 --> 00:01:37,570
Now obviously, we can absolutely do it like this but we could create utility functions for that and the

22
00:01:37,570 --> 00:01:38,960
same for updating

23
00:01:38,970 --> 00:01:46,800
arrays, this would then allow us to call this utility function and save some code here,

24
00:01:46,840 --> 00:01:47,960
how could this look like?

25
00:01:48,070 --> 00:01:49,290
Well let me show you.

26
00:01:49,420 --> 00:01:57,700
For that, I'll create a new file which I'll name utility and I'll store that in the store folder,

27
00:01:57,700 --> 00:02:02,760
you could store it in the reducers folder but I don't want to have this file look like it was a reducer

28
00:02:03,040 --> 00:02:07,010
and you could store it in some other folder but I'll use it in redux only,

29
00:02:07,060 --> 00:02:09,440
so for me the store folder sounds great.

30
00:02:10,300 --> 00:02:14,600
There I'll create a function with the ES6 arrow function style,

31
00:02:14,680 --> 00:02:21,940
so I'll create a constant holding a function in the end which I'll name updateObject, this function

32
00:02:22,180 --> 00:02:27,440
again using ES6 arrow syntax expects two arguments,

33
00:02:27,550 --> 00:02:36,700
the old object which I want to copy and update and the updatedValues. In this function,

34
00:02:36,900 --> 00:02:40,220
I then simply want to do what I previously did in my reducer,

35
00:02:40,440 --> 00:02:43,310
I want to return the updated object.

36
00:02:43,350 --> 00:02:48,520
So I'll copy one and return it in my utility function. Here

37
00:02:48,610 --> 00:02:56,640
I first of all have to distribute the properties of my old object, so I'll create a new object with all

38
00:02:56,640 --> 00:02:59,700
the old object properties and values inside of it

39
00:03:00,000 --> 00:03:03,080
and then, there are some parts which we'll probably update.

40
00:03:03,270 --> 00:03:07,880
Now here I knew that it would be the counter for the given reducer I pulled this from,

41
00:03:08,010 --> 00:03:15,810
here it's updatedValues and updatedValues in the end could just be a javascript object with all the

42
00:03:15,810 --> 00:03:17,450
values I want to overwrite,

43
00:03:17,640 --> 00:03:20,780
so I'll also distribute that, updatedValues,

44
00:03:20,940 --> 00:03:24,840
so I expect updatedValues to be a javascript object here.

45
00:03:24,840 --> 00:03:28,800
This is my utility function to update an object,

46
00:03:28,800 --> 00:03:33,740
now let me show you how you could use it. In the counter.js file,

47
00:03:33,750 --> 00:03:35,240
I'll import it,

48
00:03:35,450 --> 00:03:42,710
I'll import something from and now I'll move up to the utility.js file and the something I import

49
00:03:42,750 --> 00:03:47,010
of course is my update and I should export it

50
00:03:47,020 --> 00:03:55,440
therefore so let me add an export statement. So the something I want to import is my update object function,

51
00:03:56,040 --> 00:04:02,000
I can then use that to basically replace it whenever I want to update something.

52
00:04:02,250 --> 00:04:09,300
So in my reducer, I then just return a call to update object where I pass the state as the old object

53
00:04:10,140 --> 00:04:12,760
and then object with all the new properties,

54
00:04:12,810 --> 00:04:19,150
in my case an object with the counter property where the new value is state counter minus action val,

55
00:04:19,560 --> 00:04:27,240
and now it's a bit leaner, well due to this utility function. We can then do this for all our cases, so

56
00:04:27,240 --> 00:04:34,580
update object here also takes the state and then a javascript object where we update the counter and

57
00:04:34,580 --> 00:04:40,320
I need to pass a javascript object because it distribute the values of this object across the copied

58
00:04:41,190 --> 00:04:44,690
old object in my utility function.

59
00:04:44,710 --> 00:04:48,770
So let me quickly do this for all the other usages here too

60
00:04:48,780 --> 00:04:58,080
for all the other cases, always update the state and pass a javascript object with the updated properties.

61
00:04:58,320 --> 00:05:06,960
So finally last time I need to do this is here in my increment method, there I use the longer approach

62
00:05:07,020 --> 00:05:09,680
of updating my state previously,

63
00:05:09,750 --> 00:05:16,940
now I'll use this very short and condensed approach of just returning, whoops returning update object, there

64
00:05:17,010 --> 00:05:19,640
I want to increment the counter, so plus one.

65
00:05:20,010 --> 00:05:26,070
Let's quickly save all files including the new utility.js file and let's see if that works. Click

66
00:05:26,070 --> 00:05:27,810
add 10 decrement,

67
00:05:28,050 --> 00:05:30,660
this all seems to work so our app works

68
00:05:30,690 --> 00:05:34,450
as before, you can also still store this as you see

69
00:05:34,590 --> 00:05:36,740
but now we're using the utility function.

70
00:05:36,870 --> 00:05:40,470
So with that, we're using update object to conveniently,

71
00:05:40,590 --> 00:05:42,600
well update all our objects.

72
00:05:42,600 --> 00:05:44,530
Let's also do the update

73
00:05:44,550 --> 00:05:49,940
object usage we implemented in the result.js file, so in the other reducer.

74
00:05:50,170 --> 00:06:01,420
So I'll import update object from and now I'll also move up to the utility.js file and then let's use update

75
00:06:01,420 --> 00:06:02,610
objects here too

76
00:06:02,810 --> 00:06:10,520
to return an update object where we passed the state as the to-be-updated object and then just a javascript

77
00:06:10,520 --> 00:06:14,780
object with the properties that should be updated

78
00:06:15,200 --> 00:06:22,940
and this allows us to then get rid of the old code we had in there and use that shorter one and the

79
00:06:22,940 --> 00:06:26,110
same of course also for deleteResult.

80
00:06:26,120 --> 00:06:28,390
Now there I'm also updating an array,

81
00:06:28,430 --> 00:06:33,950
I won't write a utility function for that since updating an array depends highly on what we do with

82
00:06:33,950 --> 00:06:34,650
an array,

83
00:06:34,880 --> 00:06:39,590
adding a new element works with concat, removing with filter for example,

84
00:06:39,620 --> 00:06:44,770
so therefore it's not as easy as with an object and the utility function doesn't make that much sense

85
00:06:44,780 --> 00:06:45,710
for that reason.

86
00:06:45,980 --> 00:06:48,450
But we still update an object here in the end

87
00:06:48,560 --> 00:06:50,580
we always do when returning a new state.

88
00:06:50,810 --> 00:06:56,950
So there we get the old state and then we want to overwrite the results with our updated array,

89
00:06:57,080 --> 00:07:02,230
so let's pass this in the javascript object of the second argument. With that,

90
00:07:02,330 --> 00:07:03,350
let's save all of that and

91
00:07:03,360 --> 00:07:05,320
let's also see that in action now.

92
00:07:05,660 --> 00:07:07,130
So this all seems to work,

93
00:07:07,140 --> 00:07:08,490
let's store the result

94
00:07:09,280 --> 00:07:11,130
also works, deleting also works.

95
00:07:11,260 --> 00:07:12,520
So that's looking good,

96
00:07:12,520 --> 00:07:18,730
this is update object. This is a nice utility function we can add to make our reducers a little bit leaner.