1
00:00:01,200 --> 00:00:05,910
The first reducer we are going to put together is our cells reducer to remember there are going to be

2
00:00:05,910 --> 00:00:08,730
a couple of different properties that are managed by this reducer.

3
00:00:09,120 --> 00:00:10,710
First, we're going to have a data property.

4
00:00:10,950 --> 00:00:17,490
This will be an object where all the keys are the IDs of cells and the values will be the actual cell

5
00:00:17,490 --> 00:00:19,110
itself for that respective ID.

6
00:00:20,040 --> 00:00:24,060
We're going to have loading that we're only really going to use once we start fetching information about

7
00:00:24,060 --> 00:00:26,580
these different cells from an outside API air.

8
00:00:26,700 --> 00:00:31,890
Same thing going to be related to error messages coming from some outside API and an order which will

9
00:00:31,920 --> 00:00:37,170
be an array of strings is going to tell us the exact order of different cells and how we should render

10
00:00:37,170 --> 00:00:37,960
them on the screen.

11
00:00:38,850 --> 00:00:40,770
So let's go and create this new reducer.

12
00:00:43,170 --> 00:00:49,440
Back inside of my editor, I will find the cells reducer file at the very top, I will immediately import

13
00:00:49,740 --> 00:00:50,880
action type.

14
00:00:51,820 --> 00:00:54,280
From up on directory action type's.

15
00:00:55,210 --> 00:00:59,290
And action from actions.

16
00:01:01,280 --> 00:01:05,810
Then inside of here, remember, we're going to take the exact same approach as what we did back on

17
00:01:05,810 --> 00:01:10,340
our redux example a little bit ago, we're going to first define an interface that describes the exact

18
00:01:10,340 --> 00:01:12,960
structure or the exact output of this reducer.

19
00:01:13,340 --> 00:01:16,570
We're also going to define our initial states and then define the reducer itself.

20
00:01:17,560 --> 00:01:21,550
So first, I might create an interface called maybe cels.

21
00:01:25,020 --> 00:01:32,130
I personally, I really don't like when I get those repeat S's, so cells state having something like

22
00:01:32,130 --> 00:01:34,170
cell state just makes a lot more sense.

23
00:01:34,380 --> 00:01:37,050
But we've kind of already set ourselves up with the name of the seducer.

24
00:01:37,050 --> 00:01:38,870
We are calling it cells reducer.

25
00:01:39,240 --> 00:01:41,850
So I'm going to call it cells state.

26
00:01:42,000 --> 00:01:44,400
If you don't like that, if you want to call it cell state, totally fine.

27
00:01:44,410 --> 00:01:48,000
Just make sure you rename this interface in all appropriate locations.

28
00:01:48,780 --> 00:01:53,910
So then inside of here, exactly what we just saw on our diagram, we're going to have loading air order

29
00:01:53,910 --> 00:01:54,420
and data.

30
00:01:55,780 --> 00:01:57,400
It's going to have loading.

31
00:01:58,580 --> 00:02:05,330
Er, that will be either a string or null if there is no er will have order, which will be an array

32
00:02:05,330 --> 00:02:10,389
of strings that's going to be the ID of each cell in some very particular order.

33
00:02:11,210 --> 00:02:12,740
And then finally, detA.

34
00:02:14,730 --> 00:02:19,980
For data, we want to say that this is going to be an object where the keys are the IDs of individual

35
00:02:19,980 --> 00:02:22,930
cells and the values are the cells themselves.

36
00:02:23,580 --> 00:02:29,460
That sounds crazy, the cells themselves, whatever, to say that this is going to be an object with

37
00:02:29,460 --> 00:02:34,260
a couple of different keys and values inside of it, we're going to put in brackets key.

38
00:02:35,990 --> 00:02:37,070
Bohlin string.

39
00:02:38,840 --> 00:02:44,120
Then for a value, we want to say that this is going to be some value of type sell and remember, we

40
00:02:44,120 --> 00:02:47,180
are just to find an interface describing exactly what a cell is.

41
00:02:47,180 --> 00:02:50,630
A moment ago, we had placed that into our cell file.

42
00:02:50,980 --> 00:02:54,200
So I'm going to import that cell interface into my producer.

43
00:03:00,210 --> 00:03:01,380
OK, that looks good.

44
00:03:03,630 --> 00:03:06,960
Next up, I'm going to define some initial state for my producer.

45
00:03:08,130 --> 00:03:09,480
So I'll do initial state.

46
00:03:10,640 --> 00:03:15,680
I'm going to annotate this thing as type cells state just to make sure that I define the object with

47
00:03:15,680 --> 00:03:17,740
all the appropriate values and whatnot.

48
00:03:19,360 --> 00:03:23,350
So we'll start off with a loading of false because by default, when our application first loads up,

49
00:03:23,350 --> 00:03:29,380
we are not loading any data, our air will start as null because, well, we don't have any air just

50
00:03:29,380 --> 00:03:29,710
yet.

51
00:03:30,470 --> 00:03:33,490
Our order will be an empty array because we do not have any cells.

52
00:03:33,970 --> 00:03:38,440
And for data, as you probably guessed, we can have an empty object because again, we do not have

53
00:03:38,440 --> 00:03:39,130
any cells.

54
00:03:41,950 --> 00:03:43,030
All right, so it looks reasonable.

55
00:03:44,730 --> 00:03:46,320
Next up, we'll define producer.

56
00:03:49,840 --> 00:03:53,650
Our reducer is going to take arguments of state and action.

57
00:03:54,790 --> 00:03:59,230
For states, we will immediately annotated Stip to make sure that we never tried to access some property

58
00:03:59,230 --> 00:04:00,820
on state that doesn't actually exist.

59
00:04:01,430 --> 00:04:04,300
So I'm going to say that the type of states should be cels.

60
00:04:05,660 --> 00:04:09,980
State and I'll default its initial value to be initial state.

61
00:04:12,580 --> 00:04:19,240
Next up for action, action is going to be any of a number of different types, all described by our

62
00:04:19,240 --> 00:04:21,470
action type that we already imported at the very top.

63
00:04:21,670 --> 00:04:26,560
Remember this action thing right here that's technically kind of like the union of all different types.

64
00:04:26,560 --> 00:04:29,980
It's saying here are all the different possible types that we're ever going to receive.

65
00:04:30,520 --> 00:04:33,100
So I'm going to annotate action as action.

66
00:04:35,050 --> 00:04:39,790
And then this is technically optional, but I am going to add it in, I'm going to annotate this function

67
00:04:39,790 --> 00:04:44,920
and say that it's going to eventually return a value that satisfies the interface cell state as well.

68
00:04:47,300 --> 00:04:52,190
So this will make sure that in all possible scenarios, we always return an object that has the correct

69
00:04:52,190 --> 00:04:52,640
structure.

70
00:04:54,020 --> 00:04:57,380
All right, I'm going to say this is going to wrap everything around, but I technically still have

71
00:04:57,380 --> 00:05:01,760
exactly the same code, we're going to immediately get an air around cell state right here.

72
00:05:01,770 --> 00:05:04,730
That's just because we are not returning anything from our function right now.

73
00:05:04,940 --> 00:05:11,690
If we do return state, we are now, in theory, returning an object that satisfies the cell state interface.

74
00:05:12,050 --> 00:05:14,750
So that error message should I made a typo there.

75
00:05:15,590 --> 00:05:15,930
Here.

76
00:05:16,670 --> 00:05:17,630
It's already happening.

77
00:05:17,870 --> 00:05:19,160
I put in cell state.

78
00:05:19,160 --> 00:05:20,390
It is cells state.

79
00:05:20,390 --> 00:05:22,670
And that's why I don't really like having that trailing in there.

80
00:05:22,670 --> 00:05:23,780
It just kind of gets lost.

81
00:05:24,230 --> 00:05:27,860
The ones I put in return state and the correct interface, the error message goes away.

82
00:05:29,520 --> 00:05:33,690
The last thing I want to do is export default, this reducer at the bottom.

83
00:05:35,120 --> 00:05:36,210
OK, so this looks good.

84
00:05:36,530 --> 00:05:37,490
Good place to get started.

85
00:05:38,090 --> 00:05:39,460
Let's take a pause right here.

86
00:05:39,500 --> 00:05:43,910
We'll come back to the next video and start adding in a little bit more setup to our producer and eventually

87
00:05:43,910 --> 00:05:47,360
create our reduc store, create the store, export it, go through all those steps.