1
00:00:00,770 --> 00:00:05,689
We just put together some code to handle this update, cell action, and as you can see, yes, we did

2
00:00:05,689 --> 00:00:10,580
really end up with some complicated update logic right here now as we start to think about moving on

3
00:00:10,580 --> 00:00:12,710
to handling our delete cell action type.

4
00:00:12,740 --> 00:00:17,720
I just want to point out that the update logic is going to be even more complicated in this case.

5
00:00:17,990 --> 00:00:23,210
And the reason for that, remember, when we delete a cell, we actually have two locations where information

6
00:00:23,210 --> 00:00:24,350
about a cell is recorded.

7
00:00:24,620 --> 00:00:26,840
It is first recorded inside the data object.

8
00:00:27,080 --> 00:00:28,750
That's where the actual cell exists.

9
00:00:29,240 --> 00:00:33,950
We then also have that order array, which is going to indicate the order in which these cells should

10
00:00:33,950 --> 00:00:35,020
be presented on the screen.

11
00:00:35,720 --> 00:00:39,420
So inside there is going to be the ID of the cell and we need to delete that.

12
00:00:39,800 --> 00:00:44,060
So not only do we have to make an update to our data property, we also have to make an update to our

13
00:00:44,090 --> 00:00:45,500
order property as well.

14
00:00:46,250 --> 00:00:51,530
So if you thought that this update right here was a that confusing, it is only going to get worse.

15
00:00:52,460 --> 00:00:55,490
So with that in mind, I got a little question.

16
00:00:55,490 --> 00:00:58,760
I'm wondering, is there some better way to write out our producer?

17
00:00:58,920 --> 00:01:03,020
Is there some way that we can write out reducer that's still going to follow all the rules of redux

18
00:01:03,230 --> 00:01:07,220
where, remember, if we make any change to our state, we have to return a brand new object.

19
00:01:07,530 --> 00:01:12,200
Is there some way we can do that but not have to write out this really complicated logic?

20
00:01:12,650 --> 00:01:14,060
Well, naturally, there is.

21
00:01:14,360 --> 00:01:18,850
Let's take a look at a library that is going to allow us to directly manipulate the state object.

22
00:01:18,860 --> 00:01:23,630
In other words, change it directly instead of trying to write out all the spread logic and produce

23
00:01:23,630 --> 00:01:25,250
a brand new state object.

24
00:01:26,620 --> 00:01:31,720
So at my browser, I'm going to open up a new tab and navigate to NPM J.S. Dotcom.

25
00:01:32,470 --> 00:01:34,420
I'll then do a search for IMR.

26
00:01:34,690 --> 00:01:36,790
That is the name of the package we are going to use.

27
00:01:38,660 --> 00:01:44,180
Here's the link for it all, then scroll down a little bit and find the documentation section.

28
00:01:45,590 --> 00:01:50,120
I'm going to go to the documentation and then once here, I really recommend that you just go directly

29
00:01:50,120 --> 00:01:53,030
to the update patterns link on the left hand side.

30
00:01:54,780 --> 00:01:56,280
Well, then scroll down just a little bit.

31
00:01:57,600 --> 00:02:02,970
So the interlibrary has a ton of functionality tied to it, but its most basic and probably most important

32
00:02:02,970 --> 00:02:06,120
feature is the default expert from IMR itself.

33
00:02:06,480 --> 00:02:09,330
The default expert is a function called produce.

34
00:02:10,110 --> 00:02:13,650
Produce is a function that we are going to call with a function.

35
00:02:14,360 --> 00:02:19,320
So notice how they are calling produce right here and they are passing a function in calling produce.

36
00:02:19,320 --> 00:02:20,520
Passing a function in.

37
00:02:21,470 --> 00:02:25,310
This produce function is going to take an hour reducer.

38
00:02:26,340 --> 00:02:30,390
Produce is then going to automatically call our reducer at some point in time, and it's going to give

39
00:02:30,390 --> 00:02:35,670
to us still a state object that is identical to the state object that Redox normally gives to us with

40
00:02:35,670 --> 00:02:37,130
one very big difference.

41
00:02:37,590 --> 00:02:43,380
We can directly modify the state object as much as we want so we can reach into the state object, mutate

42
00:02:43,380 --> 00:02:49,320
and change properties at will when we then return that object or really just and we don't necessarily

43
00:02:49,320 --> 00:02:49,860
have to return it.

44
00:02:49,860 --> 00:02:50,790
Just a quick side note.

45
00:02:51,090 --> 00:02:54,150
After we mutate, it will then take that object.

46
00:02:54,330 --> 00:02:59,120
It will then magically update our state object for us in a way that is compatible with Redox.

47
00:02:59,610 --> 00:03:05,610
So long story short, IMR allows us to make very direct updates to our state object so we can avoid

48
00:03:05,610 --> 00:03:09,020
having to do these really long and complicated spread statements.

49
00:03:09,510 --> 00:03:15,600
So, for example, if we were using IMR here, we could have done something like state dot data.

50
00:03:17,070 --> 00:03:20,550
Rated not content equals content.

51
00:03:21,240 --> 00:03:26,310
This is all we have to write, if we were making use of IMR after we make this update, Emerson going

52
00:03:26,310 --> 00:03:31,710
to take the update we have made reassemble that state object in a way that is friendly to Redox and

53
00:03:31,710 --> 00:03:34,010
everything is going to work as we would normally expect it.

54
00:03:34,530 --> 00:03:39,360
The only change here is that we do not have to manually do all the spread stuff and produce a brand

55
00:03:39,360 --> 00:03:40,590
new state object on our own.

56
00:03:41,160 --> 00:03:46,260
So as you can guess, IMR is going to save us a lot of time and really simplify a lot of our different

57
00:03:46,260 --> 00:03:50,310
reducer cases because we can just write out very simple updates that look like that.

58
00:03:51,360 --> 00:03:55,020
So let's install IMR into our project and then use it inside this reducer.

59
00:03:55,050 --> 00:03:56,370
It's really easy to use.

60
00:03:57,440 --> 00:04:01,550
Can't say that enough, and that's why we're going a little bit light on the introduction, otherwise,

61
00:04:01,550 --> 00:04:04,790
if this was a more complicated library, would have several other videos to introduce it.

62
00:04:04,800 --> 00:04:06,980
But again, it's just very easy to get started with.

63
00:04:07,160 --> 00:04:10,760
So not a lot to say about it beyond to just use it and see how it works.

64
00:04:11,510 --> 00:04:12,860
OK, so let's go over to our terminal.

65
00:04:15,810 --> 00:04:17,940
Back over here, I'll do an install.

66
00:04:18,930 --> 00:04:20,560
In this case, we'll just get the latest version.

67
00:04:21,480 --> 00:04:25,590
This thing has not had bright breaking changes in a long time, so I'm not really going to say what

68
00:04:25,590 --> 00:04:26,550
the version all that much.

69
00:04:27,590 --> 00:04:28,670
Once I've installed it.

70
00:04:29,790 --> 00:04:31,680
Well, then flip back over to our Ed.

71
00:04:34,250 --> 00:04:41,030
Still inside of our cells reducer at the very top, I'm going to import produce from Himer.

72
00:04:43,710 --> 00:04:45,960
I'll then go down to where we define producer.

73
00:04:47,870 --> 00:04:52,850
We're going to go right after we where we declare to reduce our variable and I'm going to wrap our entire

74
00:04:52,850 --> 00:04:56,300
reducer with that produce function Sopot and produce like.

75
00:04:56,300 --> 00:05:01,010
So I'm going to put the closing parentheses down at the very end of our producer.

76
00:05:01,010 --> 00:05:02,870
So down right there.

77
00:05:05,990 --> 00:05:08,530
And that's pretty much all we have to do to make use of it.

78
00:05:08,780 --> 00:05:12,590
So now we can do direct updates to the state object as much as we please.

79
00:05:12,770 --> 00:05:17,720
And again, everything is just going to work as expected so we can rewrite this entire return statement

80
00:05:17,720 --> 00:05:18,130
right here.

81
00:05:18,140 --> 00:05:20,300
And again, we don't technically have to return anything.

82
00:05:20,420 --> 00:05:22,760
We can just directly make updates to our state object.

83
00:05:23,210 --> 00:05:26,690
So I'm going to delete that entire return statement and replace it with.

84
00:05:30,520 --> 00:05:36,430
Data at ID, so it's going to find the appropriate cell inside of our data object.

85
00:05:37,620 --> 00:05:41,460
Well, then, access to content property and I'll make an update to that content property.

86
00:05:43,090 --> 00:05:43,870
And that should be it.

87
00:05:44,880 --> 00:05:50,070
So now in this case, we are not really returning any value and we don't have to return a value now

88
00:05:50,100 --> 00:05:55,470
because again, IMR is going to automatically just figure out the updates we have made and return a

89
00:05:55,470 --> 00:05:56,700
state object for us.

90
00:05:57,210 --> 00:06:00,930
So we no longer really need this return type annotation on our.

91
00:06:02,200 --> 00:06:06,040
Function anymore, we don't have to say that we're going to return an object of self state because in

92
00:06:06,040 --> 00:06:08,110
some cases we are going to return anything at all.

93
00:06:08,680 --> 00:06:11,500
So I'm going to remove that return type annotation.

94
00:06:14,090 --> 00:06:18,650
Now, we might still end up with a little warning here that just because in this case, I'm not actually

95
00:06:18,650 --> 00:06:20,780
returning anything in this case anymore.

96
00:06:20,960 --> 00:06:25,610
So obviously, right after doing that update, I can add in a return like so and I'll make sure that

97
00:06:25,610 --> 00:06:27,800
I don't just fall through to all my other cases.

98
00:06:29,760 --> 00:06:30,930
OK, so that should be it.

99
00:06:31,890 --> 00:06:36,000
Now, if you still want to have the return type annotation on here, just to make sure that when you

100
00:06:36,000 --> 00:06:40,890
do want to return a value for some reason, you can still added on to the very end.

101
00:06:40,890 --> 00:06:45,780
And you can say that we're going to either return an object of type cell status or void.

102
00:06:46,020 --> 00:06:49,610
And that's going to just say, OK, if you want to return a value, we'll check it.

103
00:06:49,620 --> 00:06:51,730
But if you don't return anything, that's totally fine.

104
00:06:51,750 --> 00:06:52,580
That works as well.

105
00:06:53,890 --> 00:06:58,060
OK, so in theory is going to work just fine, but obviously we don't really have any code to test all

106
00:06:58,060 --> 00:06:58,900
this stuff out just yet.

107
00:06:59,050 --> 00:07:03,190
So we're going to assume that everything is working as usual until we can actually run this code inside

108
00:07:03,190 --> 00:07:03,760
of our browser.

109
00:07:04,350 --> 00:07:05,320
Let's take a pause here.

110
00:07:05,320 --> 00:07:09,130
Now that we are making use of IMR, we'll come back to the next video and start to wire up delete cell

111
00:07:09,130 --> 00:07:09,610
as well.