1
00:00:00,510 --> 00:00:05,220
We have put together all of our different action graders, or at least the synchronous ones, remember,

2
00:00:05,220 --> 00:00:09,090
we're going to eventually come back and handle cells and a little bit and we're going to move on and

3
00:00:09,090 --> 00:00:11,070
start to work on our cells reducer.

4
00:00:11,610 --> 00:00:16,530
Back inside of my code editor, Ed, I will find the cells reducers its file inside of here.

5
00:00:16,530 --> 00:00:19,250
We had already put together a lot of initial scaffolding.

6
00:00:19,500 --> 00:00:22,140
We've got all of our four different cases outlined right here.

7
00:00:22,320 --> 00:00:24,750
We just have to go back through and add in some implementation.

8
00:00:25,260 --> 00:00:31,290
The first one we'll work on is update cell to remember update so we can look at what we are going to

9
00:00:31,290 --> 00:00:36,730
get as a payload by going back over to our action creature file and finding updates.

10
00:00:36,730 --> 00:00:37,070
Cell.

11
00:00:37,860 --> 00:00:38,520
Where is it?

12
00:00:40,190 --> 00:00:46,430
Right here, so whenever we get an action of type update Zel, we'll get a payload that has ID and content.

13
00:00:47,000 --> 00:00:52,040
So all we have to do is find the appropriate cell and update its contents inside of our state object.

14
00:00:52,670 --> 00:00:57,700
Now, quick note on our state object for the cells reducer in particular.

15
00:00:58,190 --> 00:01:02,390
Remember, we had said that we would have a data property managed by this reducer, but we didn't really

16
00:01:02,390 --> 00:01:05,300
go into a lot of detail about what this data property was going to look like.

17
00:01:05,810 --> 00:01:08,990
So I've kind of annotated its type on this little diagram right here.

18
00:01:09,390 --> 00:01:11,930
So our data property is going to be an object.

19
00:01:12,770 --> 00:01:18,200
The IDs or the keys of this object are going to be the IDs of each of our different cells.

20
00:01:18,650 --> 00:01:21,680
And then the value for each will be another object.

21
00:01:22,100 --> 00:01:23,700
That is the actual cell itself.

22
00:01:24,170 --> 00:01:28,490
So the reason that we are storing these things in an object is to just be able to look them up in the

23
00:01:28,490 --> 00:01:30,800
future very easily by just using an ID.

24
00:01:31,580 --> 00:01:35,090
Another way we could have stored these cells was inside of a big array.

25
00:01:36,260 --> 00:01:41,510
Like, so so we could have just had an array of small objects, but if we did that any time we wanted

26
00:01:41,510 --> 00:01:46,880
to find a particular cell, we would have to do a find statement inside there and try to find the appropriate

27
00:01:46,880 --> 00:01:49,400
cell, which would just be an extra little bit of code.

28
00:01:49,850 --> 00:01:53,330
So life is going to be a little bit easier if we just store these things inside of an object.

29
00:01:54,140 --> 00:01:56,910
So just as a very quick example, you don't have to write out this code.

30
00:01:56,960 --> 00:02:00,500
This is just a very quick example to help you understand what our state is going to look like.

31
00:02:01,040 --> 00:02:02,480
We're going to have loading.

32
00:02:02,480 --> 00:02:03,500
It will be true or false.

33
00:02:03,800 --> 00:02:05,200
Right now, it's always going be false.

34
00:02:05,840 --> 00:02:07,790
We're going to have our air.

35
00:02:09,030 --> 00:02:10,000
It will probably be no.

36
00:02:11,009 --> 00:02:16,590
We'll have data which will be an object, the keys are going to be an identifier for each particular

37
00:02:16,590 --> 00:02:21,330
cell, so maybe something like that, and then the value will be a cell object.

38
00:02:21,660 --> 00:02:24,870
Remember, we already said exactly what a cell object is going to look like.

39
00:02:25,110 --> 00:02:28,640
We defined what a cell object was going to be inside of our cell DOT's file.

40
00:02:29,220 --> 00:02:30,800
So we had set up this interface right here.

41
00:02:31,260 --> 00:02:33,990
So these cell objects are going to have this structure.

42
00:02:34,600 --> 00:02:35,610
So we're going to have.

43
00:02:36,980 --> 00:02:45,140
Again, just as a very quick example, an ID of that same thing, a type of either text or code, maybe

44
00:02:45,140 --> 00:02:47,750
in this case it's code and then content.

45
00:02:49,820 --> 00:02:55,160
Which will be whatever code a user wrote in to the code editor, so maybe something like const A equals

46
00:02:55,160 --> 00:02:56,420
one or something similar.

47
00:02:57,980 --> 00:03:02,510
Then inside of our data object, we might have many of these different cells, so the next one might

48
00:03:02,510 --> 00:03:03,800
have a totally different ID.

49
00:03:04,710 --> 00:03:10,890
It might be type text and its content might be some kind of documentation for this thing.

50
00:03:12,660 --> 00:03:16,980
So when we start to talk about making an update to a cell, we need to go into that data property,

51
00:03:17,280 --> 00:03:20,160
we need to find the appropriate cell by looking up its ID.

52
00:03:20,880 --> 00:03:24,570
We're then going to update its content property, and that's pretty much it.

53
00:03:24,570 --> 00:03:26,010
That's all we really have to do here.

54
00:03:26,930 --> 00:03:31,070
OK, so now we've got a better idea of what's going on, let's do some implementation.

55
00:03:32,230 --> 00:03:39,670
So for updates, so instead of just returning state, I'm going to return a new object that has all

56
00:03:39,670 --> 00:03:41,200
the existing properties of St..

57
00:03:42,430 --> 00:03:47,410
And then going to refine or redefine the data property or of the yes, the data property, that's what

58
00:03:47,410 --> 00:03:47,830
we called it.

59
00:03:49,670 --> 00:03:52,370
The new value for the data property is going to be a new object.

60
00:03:53,980 --> 00:04:00,550
That has all the existing cells out of the state data property, so we're going to take all those existing

61
00:04:00,550 --> 00:04:02,680
cells out of that object and throw them inside of here.

62
00:04:03,340 --> 00:04:09,870
And the one exception is that we're going to overwrite whatever is at action, not payload.

63
00:04:10,450 --> 00:04:12,280
So we're going to override that cell.

64
00:04:15,490 --> 00:04:19,269
The new value for that particular cell and I'm going to give myself just a little bit of space here.

65
00:04:22,050 --> 00:04:26,860
It's a new value at that point will be and it's going to be a little bit long, this statement right

66
00:04:26,860 --> 00:04:32,470
here, state dot data at action payload ID.

67
00:04:33,470 --> 00:04:36,070
So that's going to be the actual cell itself.

68
00:04:37,370 --> 00:04:40,910
We're going to extract all the properties from that and add it into a new object.

69
00:04:42,370 --> 00:04:46,270
And then we're going to overwrite its data proper content proper.

70
00:04:46,300 --> 00:04:49,420
Excuse me, I'm going to give myself just a little bit of space.

71
00:04:49,610 --> 00:04:54,070
We're going to say you are going to have a new content property and the value for that new content property

72
00:04:54,070 --> 00:04:57,760
will come from action, not payload, not content.

73
00:05:00,240 --> 00:05:01,920
All right, that's it.

74
00:05:02,700 --> 00:05:07,500
Now, remember, all this really confusing stuff inside of here is because whenever working with Redox,

75
00:05:07,500 --> 00:05:11,060
if we're making a change, we don't want to directly modify our state object.

76
00:05:11,070 --> 00:05:13,290
Instead, we want to return a brand new object.

77
00:05:13,680 --> 00:05:16,080
So this is just one way of writing that out.

78
00:05:16,360 --> 00:05:20,820
We don't technically have to be this kind of verbose and all of it, but this definitely is going to

79
00:05:20,820 --> 00:05:21,570
work out just fine.

80
00:05:22,970 --> 00:05:28,250
One thing we might do to kind of make this a little bit easier to read is to do structure off the idea

81
00:05:28,250 --> 00:05:32,120
of the cell we want to update and the content ahead of time because then we won't have to write out

82
00:05:32,120 --> 00:05:34,640
action, not payload, in these three separate locations.

83
00:05:35,890 --> 00:05:43,000
So inside of our case right here, we could pull off just ID and content from action payload.

84
00:05:44,950 --> 00:05:47,820
And then inside of our square brackets, we can reduce that to just idee.

85
00:05:49,090 --> 00:05:52,120
Inside of these square brackets, we can also reduce it to IDX.

86
00:05:53,610 --> 00:05:58,950
And then finally for the update, instead of writing out content is action pela content, it can be

87
00:05:58,950 --> 00:06:00,300
just content like so.

88
00:06:03,020 --> 00:06:08,780
OK, so there is our first case put together, well, now we've got this done, let's take a quick pause

89
00:06:08,780 --> 00:06:09,280
right here.

90
00:06:09,320 --> 00:06:13,040
I can just about guarantee you that some of these other ones are going to be a little bit more straightforward

91
00:06:13,040 --> 00:06:13,490
in nature.

92
00:06:13,670 --> 00:06:15,340
But we'll take care of those in just a moment.