1
00:00:01,170 --> 00:00:03,719
We've now got a plan put together for the redock side of our application.

2
00:00:03,960 --> 00:00:08,280
Now in this video, we're going to start with the implementation, starting off first with our producer.

3
00:00:08,610 --> 00:00:11,670
So we're going to have one producer called the repositories producer.

4
00:00:12,270 --> 00:00:14,610
We're going to handle a couple of different actions inside of it.

5
00:00:14,790 --> 00:00:20,340
And we're going to eventually have three pieces of state produced by the producer data loading and er

6
00:00:21,130 --> 00:00:26,280
this first implementation, we're going to almost pretend that we are writing out plain JavaScript style

7
00:00:26,280 --> 00:00:27,030
redux code.

8
00:00:27,210 --> 00:00:28,800
So we're not going to worry too much about types.

9
00:00:28,980 --> 00:00:32,100
We're not really going to worry about defining anything else inside of outside files.

10
00:00:32,310 --> 00:00:35,350
I want to just focus 100 percent on the reducer to get started.

11
00:00:36,060 --> 00:00:40,770
So to begin back inside my code editor, I'm going to find the SRT directory inside there.

12
00:00:40,800 --> 00:00:42,600
I'm going to create a new folder called State.

13
00:00:43,300 --> 00:00:47,190
I'm going to place all of my redox related code inside this state folder.

14
00:00:47,490 --> 00:00:50,160
If you do not like the name of the folder, that is totally fine.

15
00:00:50,310 --> 00:00:52,050
You can rename it to anything you want.

16
00:00:52,830 --> 00:00:56,010
Then inside there I will make a new directory called Reducers.

17
00:00:56,760 --> 00:01:01,200
And then finally in that directory, I will make repositories.

18
00:01:02,290 --> 00:01:04,000
Reducer Daugherty's.

19
00:01:06,450 --> 00:01:12,390
OK, so like I said, inside this file, we're going to just pretend that we are writing almost JavaScript

20
00:01:12,390 --> 00:01:17,040
looking code, we're not going to worry about creating extra fancy typescript stuff right away.

21
00:01:17,740 --> 00:01:19,520
So let's first define reducer.

22
00:01:19,800 --> 00:01:24,290
Remember, the reducers is going to receive the arguments of states or whatever the state was the last

23
00:01:24,290 --> 00:01:27,000
time this reducer ran and an action that we need to process.

24
00:01:27,330 --> 00:01:30,750
And then we need to return some kind of state that has these three properties.

25
00:01:31,930 --> 00:01:32,920
So I want you to find.

26
00:01:34,150 --> 00:01:35,440
But just reducer.

27
00:01:37,330 --> 00:01:38,500
And all assigned to it.

28
00:01:39,650 --> 00:01:43,310
A function that would be called with some state and some action.

29
00:01:44,460 --> 00:01:46,230
I'm then going to export at the bottom.

30
00:01:48,990 --> 00:01:51,930
Let's do a default export of reducer.

31
00:01:53,290 --> 00:01:53,950
For right now.

32
00:01:55,730 --> 00:01:59,210
So right away, we're going to, of course, the entire message around these two arguments, we're being

33
00:01:59,210 --> 00:02:04,670
told we have not provided a type for states or action, but we could definitely figure out what type

34
00:02:04,670 --> 00:02:09,380
of state should be, because we have said several times now that we want this repositories reducer to

35
00:02:09,380 --> 00:02:12,530
return an object that has a data property loading.

36
00:02:12,530 --> 00:02:18,080
And er so let's define an interface that describes this argument at the top of the file.

37
00:02:18,350 --> 00:02:19,880
I'll put in an interface.

38
00:02:20,910 --> 00:02:24,120
Of how about repositories state?

39
00:02:25,360 --> 00:02:28,180
I'll say that this has a floating flag that will be a boolean.

40
00:02:29,280 --> 00:02:34,060
An air property that will be either a string or no.

41
00:02:34,500 --> 00:02:39,900
So if we have an air, we will set the air message to air and if there is no air, then we'll just get

42
00:02:39,900 --> 00:02:41,490
it to null to indicate there is no air.

43
00:02:41,520 --> 00:02:42,990
Everything is working as expected.

44
00:02:43,800 --> 00:02:45,090
And then finally, data.

45
00:02:45,970 --> 00:02:51,250
So for data right now, we want this eventually to be an array of those repository objects, we get

46
00:02:51,250 --> 00:02:56,170
back from the NPM API, but for right now we'll just make data, an array of strings, and we're going

47
00:02:56,170 --> 00:03:00,340
to imagine that this array is going to contain the name of all the different packages that we just fetch

48
00:03:00,340 --> 00:03:01,120
from that API.

49
00:03:01,900 --> 00:03:02,770
It's going to make data.

50
00:03:03,860 --> 00:03:05,480
An array of strings like so.

51
00:03:07,350 --> 00:03:09,090
Now I can apply.

52
00:03:10,360 --> 00:03:14,440
That interface to state, I'll say, repositories state like so.

53
00:03:17,060 --> 00:03:21,230
Then for action, we have a very similar air and like I mentioned, for right now, we're just going

54
00:03:21,230 --> 00:03:23,780
to kind of pretend we're almost writing JavaScript style code.

55
00:03:23,930 --> 00:03:26,530
So I'm going to just annotate this as any for right now.

56
00:03:26,540 --> 00:03:28,670
We're going to come back in just a moment and fix it up.

57
00:03:28,670 --> 00:03:30,290
But right now, I'll leave it as any.

58
00:03:31,380 --> 00:03:36,000
Then remember the code that we usually have inside of reducer, almost always a switch statement.

59
00:03:36,130 --> 00:03:37,340
I'm going to set up a switch right away.

60
00:03:39,090 --> 00:03:41,490
I'm going to switch over action type.

61
00:03:42,590 --> 00:03:47,750
We might have a couple of different cases, but first, I'll take care of the case if we do not match

62
00:03:47,750 --> 00:03:53,150
up to any case that we want to use to process this incoming action than our default will be to just

63
00:03:53,150 --> 00:03:54,380
return state.

64
00:03:55,770 --> 00:04:00,420
So we can go ahead and start to add in our a couple of different cases, so the different cases that

65
00:04:00,420 --> 00:04:03,270
we are going to have are these different action types down here.

66
00:04:03,960 --> 00:04:10,050
So our cases are going to be a string of search repositories, search repositories, success and search

67
00:04:10,050 --> 00:04:10,840
repositories area.

68
00:04:10,870 --> 00:04:15,810
It looks like I misspelt repositories in there doesn't really make a big difference because we're going

69
00:04:15,810 --> 00:04:19,410
to eventually well, get the right typing or the right spelling over here.

70
00:04:20,140 --> 00:04:22,560
I'll put in a case of search.

71
00:04:24,010 --> 00:04:24,790
Repositories.

72
00:04:26,250 --> 00:04:27,450
A case of search.

73
00:04:29,140 --> 00:04:31,810
Repositories success.

74
00:04:33,190 --> 00:04:35,350
In a case of Zorch.

75
00:04:37,210 --> 00:04:38,000
Rapports.

76
00:04:40,010 --> 00:04:41,200
The Tories air.

77
00:04:43,450 --> 00:04:48,880
Now we need to handle each of these different cases well, in the case of search repositories, whenever

78
00:04:48,880 --> 00:04:52,480
we see this action, it means that we just started up a new request.

79
00:04:52,960 --> 00:04:56,080
So we need to flip that loading flag over to Tru.

80
00:04:56,920 --> 00:04:59,890
So if we in this first case, I'm going to do a return.

81
00:05:00,820 --> 00:05:02,950
I'm going to return a loading of true.

82
00:05:04,250 --> 00:05:09,230
I'm going to say that whatever air we currently have is not relevant anymore because we just started

83
00:05:09,230 --> 00:05:10,280
up another request.

84
00:05:10,590 --> 00:05:13,700
So if there was an air at the previous request, I don't care about that air anymore.

85
00:05:13,850 --> 00:05:15,380
So I'm going to reset air to be null.

86
00:05:16,270 --> 00:05:20,080
And then finally, I'm going to say that whatever results we had from the last time we tried to fetch

87
00:05:20,080 --> 00:05:24,000
some data don't really matter anymore because we were trying to do a new search right now.

88
00:05:24,310 --> 00:05:27,280
So I'm also going to reset data to be an empty array.

89
00:05:29,100 --> 00:05:33,750
So, again, search repositories will be the action that we see as soon as the user clicks on that search

90
00:05:33,750 --> 00:05:34,120
button.

91
00:05:34,140 --> 00:05:37,380
So I think that all these settings right here make a lot of sense for that.

92
00:05:38,430 --> 00:05:45,000
Next up, if we got back a successful response from the AP, then in that case, we're going to return.

93
00:05:46,430 --> 00:05:53,900
A loading of false because we're no longer loading an air of null because, well, no air probably occurred

94
00:05:53,900 --> 00:05:56,500
because we are seeing the success case right now.

95
00:05:57,020 --> 00:06:02,150
And then finally, our data property, it will be action payload because presumably it's not payload

96
00:06:02,270 --> 00:06:05,990
is going to have all that information about all these repositories that we just found.

97
00:06:06,440 --> 00:06:08,630
We'll do an action packed payload like so.

98
00:06:12,500 --> 00:06:15,770
Then finally, search repositories there, so in this case.

99
00:06:16,690 --> 00:06:22,000
If we see an error, we are probably no longer loading anything because we just got back some response,

100
00:06:22,000 --> 00:06:23,740
presumably there was an error message inside of it.

101
00:06:23,750 --> 00:06:25,600
So I want to say we are no longer loading.

102
00:06:27,170 --> 00:06:32,420
Our air will be action payload because the payload in this case is going to contain the error message

103
00:06:32,430 --> 00:06:35,050
we got back from the API or whatever else went wrong.

104
00:06:36,070 --> 00:06:41,340
And then I'm going to also reset our data property as well to say, well, we just got an error.

105
00:06:41,470 --> 00:06:44,360
So if we had any data, it is probably no longer relevant.

106
00:06:44,390 --> 00:06:46,420
So I'm going to reset it back to an empty array.

107
00:06:47,820 --> 00:06:53,460
OK, so I'm going to save this all the code we have inside of here definitely works no two ways about

108
00:06:53,460 --> 00:06:53,630
it.

109
00:06:53,850 --> 00:06:58,500
We could definitely run this inside of a normal JavaScript project in our application would work just

110
00:06:58,500 --> 00:06:59,070
perfectly.

111
00:06:59,640 --> 00:07:04,170
But at this point in time, we are really not taking advantage of many features of TypeScript.

112
00:07:04,650 --> 00:07:11,700
For example, right now, if I tried to say maybe return instead of a data property right here of an

113
00:07:11,700 --> 00:07:15,150
array, if I instead tried to return a data property that was an object.

114
00:07:15,900 --> 00:07:21,780
Well, chances are if I sometimes have a data property that is an array and other times data that is

115
00:07:21,780 --> 00:07:23,880
an object, I might see something break.

116
00:07:24,040 --> 00:07:26,520
I could also put in data that is a string.

117
00:07:26,910 --> 00:07:28,680
I could put in data that is a number.

118
00:07:29,250 --> 00:07:33,600
These are all cases that I really want TypeScript, to kind of jump in and say, hey, you are kind

119
00:07:33,600 --> 00:07:35,360
of not doing something correctly right now.

120
00:07:36,090 --> 00:07:40,920
So ideally, I think that we need to use TypeScript a little bit more than we are right now and make

121
00:07:40,920 --> 00:07:47,070
sure that maybe this action that we're receiving looks like the kind of argument we are expecting.

122
00:07:47,070 --> 00:07:51,660
In other words, we want to say that action actually looks like an object that has a type and a payload.

123
00:07:52,050 --> 00:07:55,620
And we probably want to make sure that we get TypeScript to take a look at whatever we are.

124
00:07:55,830 --> 00:08:00,510
We are returning from this function as well and make sure that it has the appropriate type of properties

125
00:08:00,810 --> 00:08:05,820
to make sure that we are not returning something with a data value right here that is some kind of number

126
00:08:05,820 --> 00:08:08,930
or something like that, which, again, would probably cause our application to break.

127
00:08:09,660 --> 00:08:10,740
So let's take a pause right here.

128
00:08:10,770 --> 00:08:15,330
Come back the next video and start to apply a little bit more, TypeScript, into this file.