1
00:00:00,840 --> 00:00:03,950
In the last video we finished up our create stream action creator.

2
00:00:03,950 --> 00:00:09,710
So now after we create our new stream our response we get back has the newly created stream model according

3
00:00:09,710 --> 00:00:12,810
to our API with the new ID inserted in there.

4
00:00:13,010 --> 00:00:18,800
And so we are now going to dispatch an action that has a payload of the data that we got back in response.

5
00:00:18,820 --> 00:00:23,510
Now before we move on and start working on reduce or anything like that I want to point something out

6
00:00:23,540 --> 00:00:27,320
about following these restful conventions inside of our application.

7
00:00:27,320 --> 00:00:32,550
Now I took that restful conventions chart right here and I added on a new column that says response.

8
00:00:32,940 --> 00:00:33,810
My response right here.

9
00:00:33,820 --> 00:00:38,450
I mean to indicate what our API server is going to return anytime that we make this type of request

10
00:00:38,450 --> 00:00:39,260
to it.

11
00:00:39,410 --> 00:00:46,670
So if we make a request to slash streams we're going to get back an array or list of records a get for

12
00:00:46,670 --> 00:00:51,950
a single record will return a single record a post two streams will return the record we just created

13
00:00:52,220 --> 00:00:58,090
a PUT will return a single record and a delete to a single record is going to return nothing at all.

14
00:00:58,100 --> 00:01:04,040
So if we are truly following restful conventions then you and I kind of already know exactly what our

15
00:01:04,430 --> 00:01:07,160
responses are going to be from that API server.

16
00:01:07,250 --> 00:01:09,240
So I kind of have a crazy thought here.

17
00:01:09,380 --> 00:01:14,660
Even though we do not have any component to show a list of streams even though we don't have a component

18
00:01:14,660 --> 00:01:18,280
to edit a stream even though we don't have a component to delete a stream.

19
00:01:18,290 --> 00:01:23,450
Even though we don't have any components put together right now because if we follow restful conventions

20
00:01:23,450 --> 00:01:25,830
we know exactly what data we are working with.

21
00:01:25,850 --> 00:01:30,410
I think that we could actually create all of our action creators right now and kind of get the entire

22
00:01:30,410 --> 00:01:35,540
process of writing out these action creators done with right now as opposed to having to always come

23
00:01:35,540 --> 00:01:40,730
back to the actions index not as file and creating each of these different action creators as we work

24
00:01:40,730 --> 00:01:42,880
on each different part of the application.

25
00:01:43,900 --> 00:01:48,790
Again we are only able to do this because we are following restful conventions to a tee.

26
00:01:48,940 --> 00:01:51,530
We're doing exactly what is recommended with them.

27
00:01:51,640 --> 00:01:53,260
So I think that's what we'll try doing.

28
00:01:53,320 --> 00:01:58,360
We're going to try to put together all of our action creators right now an action creator for creating

29
00:01:58,360 --> 00:02:03,460
a stream or fetching a list of streams for getting one for editing and deleting and then we're going

30
00:02:03,460 --> 00:02:08,400
to try to eventually wire these all up to our different components when we eventually create them.

31
00:02:08,400 --> 00:02:12,850
Now it's entirely possible that we might make a mistake here or there but I think that in general this

32
00:02:12,850 --> 00:02:14,370
might actually work out.

33
00:02:14,740 --> 00:02:15,000
All right.

34
00:02:15,010 --> 00:02:16,510
So let's give it a shot.

35
00:02:16,510 --> 00:02:21,100
So we're going to create separate action creators for each of these different operations.

36
00:02:21,100 --> 00:02:22,770
We already did one for creates.

37
00:02:22,810 --> 00:02:25,810
So we're going to essentially make for others.

38
00:02:25,840 --> 00:02:32,410
The first thing we're going to do is create types inside of our type start J.S. file one for each different

39
00:02:32,410 --> 00:02:34,640
operation that we expect to do.

40
00:02:34,660 --> 00:02:39,610
So inside if you're going to write out a couple of different types I'm going to add in export Konst

41
00:02:40,000 --> 00:02:45,690
batch streams as fetch streams.

42
00:02:45,940 --> 00:02:50,600
So this will be the type for whenever we get all of the different streams that exist inside of our API.

43
00:02:51,130 --> 00:02:58,900
I'll do a export Konst fetch stream that singular so there's no it's not deemed stream.

44
00:02:59,020 --> 00:03:03,610
There's no s on there so this is going to be the type that we use any time that we fetch a single record

45
00:03:03,610 --> 00:03:04,660
by itself.

46
00:03:06,920 --> 00:03:18,610
So fetch stream will do a delete stream.

47
00:03:19,170 --> 00:03:20,320
They'll eat.

48
00:03:20,500 --> 00:03:24,120
Sorry my hands are really cold right now making all these typos.

49
00:03:24,160 --> 00:03:25,650
OK we've got delete.

50
00:03:25,650 --> 00:03:27,480
I think we need the update.

51
00:03:27,510 --> 00:03:29,570
So this will be something like maybe edit stream

52
00:03:33,610 --> 00:03:41,060
so edit Stream.

53
00:03:41,270 --> 00:03:42,170
And I think that's about it.

54
00:03:42,170 --> 00:03:44,190
I think we've got all five cases.

55
00:03:44,360 --> 00:03:50,570
So creation fetching a list fetching an individual deleting a record and editing a record.

56
00:03:50,570 --> 00:03:54,500
Now that we've got all these types put together we can import all five of them or the remaining four

57
00:03:54,500 --> 00:03:59,920
I suppose back into our actions index not just file and then create action crater's for each one.

58
00:04:00,290 --> 00:04:02,650
So I'll put the import statement for my types at the top.

59
00:04:02,660 --> 00:04:04,990
I'm going to first give myself a little bit of space here.

60
00:04:05,890 --> 00:04:09,410
I'm making this into a multi-line import statement like so.

61
00:04:10,760 --> 00:04:14,180
And then I'll get all of those other types that we just created.

62
00:04:14,180 --> 00:04:20,570
Now as a quick shortcut here if you are on the code or using Adam right now you can use that command

63
00:04:20,600 --> 00:04:25,190
D or control d hot key to very quickly copy paste all these types over.

64
00:04:25,490 --> 00:04:30,710
So if you want to you can highlight say can strike here and then hit either command or control.

65
00:04:30,770 --> 00:04:36,680
If you are on Windows and that will multi-select conc like so then you can hit right arrow twice to

66
00:04:36,680 --> 00:04:42,560
get the cursor next to all those types and then you can do a little shift select like so to get each

67
00:04:42,560 --> 00:04:48,260
of those different types and then copy all that go back over to the index file and paste them all in

68
00:04:48,260 --> 00:04:48,960
like so.

69
00:04:49,100 --> 00:04:51,190
Now if you're not going use that shortcut totally fine.

70
00:04:51,200 --> 00:04:55,730
Just make sure that you import each of these different types and then get a comma after each one except

71
00:04:55,730 --> 00:04:57,240
for the last one.

72
00:04:57,320 --> 00:05:01,640
Now after you do all that I recommend you save the file flip back over to the browser and just make

73
00:05:01,640 --> 00:05:06,160
sure that you're not getting the error message saying something like Oh this type doesn't exist if you

74
00:05:06,160 --> 00:05:10,010
are seeing an error message saying that some given import does not exist.

75
00:05:10,010 --> 00:05:13,900
It very likely means that you made a typo ok.

76
00:05:13,930 --> 00:05:18,910
Now that we've got all of our types Let's try putting together an action creator for one of our most

77
00:05:18,910 --> 00:05:26,050
basic actions which is to fetch a list of all the different records that we have on that API so underneath

78
00:05:26,050 --> 00:05:32,540
create Stream right here we're going to create a new action creator that we'll call something like fetch

79
00:05:32,600 --> 00:05:36,020
streams.

80
00:05:36,040 --> 00:05:41,870
So this is going to be an arrow function that returns a funk function like so.

81
00:05:42,210 --> 00:05:45,130
And then inside of here we're going to follow our restful conventions.

82
00:05:45,130 --> 00:05:51,310
I can't say it enough so we're going to make a get request to slash streams using our ASIO's instance

83
00:05:51,630 --> 00:06:00,590
Zola's say construct Spawn's is a waste stream start get flash streams and then I'll do a dispatch with

84
00:06:00,590 --> 00:06:08,220
a type of fetch underscore streams and a payload of response data like the.

85
00:06:08,360 --> 00:06:11,910
So it can essentially just repeat this process a couple times over.

86
00:06:11,920 --> 00:06:16,510
I would encourage you to not do a copy paste here just because it's going to increase the probability

87
00:06:16,510 --> 00:06:19,700
of you accidentally forgetting to change like a typo or something like that.

88
00:06:19,720 --> 00:06:24,220
So I would encourage you to type each of these out and triple check to make sure that you've got the

89
00:06:24,220 --> 00:06:27,960
correct function name and the correct type inside of each one as well.

90
00:06:28,000 --> 00:06:31,780
The next one will do is the patch for a single record.

91
00:06:31,780 --> 00:06:35,620
Now notice when we fetch a single record we need to know the idea of the record that we're trying to

92
00:06:35,620 --> 00:06:36,340
fetch.

93
00:06:36,580 --> 00:06:39,940
So we'll create a new action creator called fetch stream.

94
00:06:39,940 --> 00:06:45,370
So no s on here because this is fetching just one stream as opposed to multiple.

95
00:06:45,420 --> 00:06:49,890
And then when we call this action creator we're probably going to want to pass in the idea of the stream

96
00:06:49,890 --> 00:06:51,600
that we are trying to fetch.

97
00:06:51,600 --> 00:06:56,310
So on the initial function right here the actual action creator function I want to make sure I pass

98
00:06:56,310 --> 00:07:04,950
in some ID argument and I'll do my async dispatch and inside of your I'll say Konst response.

99
00:07:04,950 --> 00:07:11,940
So we'll do our streams Dogget And then this time we want to make a request to slash streams slash and

100
00:07:11,940 --> 00:07:18,120
then the ID of the one that we're trying to fetch to do so I'm going to use a yes 20:15 templates string

101
00:07:18,120 --> 00:07:18,600
here.

102
00:07:18,720 --> 00:07:25,520
So put in my back ticks like so and I'll say slash dreams slash dollar sign curly brace ID.

103
00:07:29,290 --> 00:07:34,420
And then I'll do a dispatch type of fetch stream.

104
00:07:34,450 --> 00:07:41,420
So notice here on stream's we have streams so s and s on fecche stream individual one we have Fettes

105
00:07:41,430 --> 00:07:45,030
stream no s and no s on the type there as well.

106
00:07:45,860 --> 00:07:52,480
Then for our payload we'll do a response loop response data like so OK.

107
00:07:52,520 --> 00:07:55,850
Just two more I think just edit and delete.

108
00:07:55,850 --> 00:07:59,910
So let's do our edit stream action creator.

109
00:07:59,990 --> 00:08:01,730
Now this one is going to be a little bit more challenging.

110
00:08:01,730 --> 00:08:07,580
Anytime that we edit a stream or try to update it we need to provide both the ID and the update that

111
00:08:07,580 --> 00:08:10,610
we're trying to make to that stream as arguments to the actual creator.

112
00:08:10,610 --> 00:08:14,840
This is one where Ill make a little bit more sense later on when we start working with this creator

113
00:08:14,840 --> 00:08:15,790
more directly.

114
00:08:15,830 --> 00:08:20,640
But essentially we want to kind of combine the idea of receiving the idea as an argument from fecche

115
00:08:20,660 --> 00:08:26,510
dream with the idea of passing inform values that we used up with create stream as well.

116
00:08:26,510 --> 00:08:32,570
So for it stream I'm going to receive the ID of the record I want to edit along with some form values

117
00:08:32,600 --> 00:08:36,320
that contain the actual updates I want to make to that particular stream.

118
00:08:36,350 --> 00:08:38,810
So then again do an async dispatch.

119
00:08:41,960 --> 00:08:50,490
Got my Konst response streams dot and then in this case we are making a put type request try to make

120
00:08:50,490 --> 00:08:56,520
a point type requests with axially will call streams dot put and then just as before we need to make

121
00:08:56,520 --> 00:09:01,170
sure that we specify the actual ID of the stream that we're trying to edit I'll use a template string

122
00:09:01,170 --> 00:09:06,600
again and I'll do streams slash dollar sign ID and then we need to make sure that we communicate the

123
00:09:06,630 --> 00:09:08,250
updates that we want to make.

124
00:09:08,250 --> 00:09:12,350
So in the body of this put request will specify form values

125
00:09:15,100 --> 00:09:23,750
and then we will again dispatch type edit stream that the payload of response data.

126
00:09:23,930 --> 00:09:26,710
And then finally the very last one is going to be delete.

127
00:09:26,720 --> 00:09:30,090
So were going to make a delete type request to that give an ID.

128
00:09:30,200 --> 00:09:32,020
And in this case we get nothing back.

129
00:09:32,030 --> 00:09:36,110
So our Palit property this time round is going to be just a little bit different.

130
00:09:36,150 --> 00:09:40,590
Its all due in export Konst delete stream.

131
00:09:40,590 --> 00:09:42,470
This will be called with some ID.

132
00:09:42,750 --> 00:09:46,900
I'll get my async dispatch.

133
00:09:47,000 --> 00:09:48,970
I'll do Konst response.

134
00:09:48,990 --> 00:09:49,170
It.

135
00:09:49,180 --> 00:09:52,730
Actually we don't actually need any response in this case because the response is going to be empty

136
00:09:52,740 --> 00:09:56,660
so I'll just leave that off and I'll do an oh wait streams start.

137
00:09:56,700 --> 00:09:57,130
Delete.

138
00:09:57,150 --> 00:10:00,170
So that's how we make a delete request with X-ers.

139
00:10:00,270 --> 00:10:04,500
And then again we need to specify which stream we're trying to delete so I'll put my back ticks in for

140
00:10:04,500 --> 00:10:09,350
a template string and I'll do stream's slash dollar sign.

141
00:10:09,570 --> 00:10:10,980
Really brace ID.

142
00:10:12,400 --> 00:10:17,140
Now in this case and we do our dispatch we're not going to have any payload data property we will have

143
00:10:17,140 --> 00:10:20,730
a payload but we're not going to put the response data on there.

144
00:10:21,040 --> 00:10:30,010
So I'll do a dispatch type delete stream and then this time around I'll put on a payload for the payload.

145
00:10:30,020 --> 00:10:35,000
I'm just going to put in the idea of the stream that we just attempted to delete like so and this is

146
00:10:35,000 --> 00:10:38,700
going to make a lot of sense a lil bit later on when we start to write out our.

147
00:10:39,080 --> 00:10:39,380
OK.

148
00:10:39,410 --> 00:10:40,660
So that's pretty much it.

149
00:10:40,670 --> 00:10:45,470
We were able to write out all of our different action creators because we are following restful conventions

150
00:10:45,500 --> 00:10:51,470
and we know exactly what route we are trying to make a request to what information each request type

151
00:10:51,470 --> 00:10:55,520
needs in terms of like ID and updating with some information.

152
00:10:55,580 --> 00:10:59,790
And we know exactly what the response is going to be in each case and that's the only reason that we

153
00:10:59,790 --> 00:11:04,180
were able to write out these kind of early drafts of each of our action creators.

154
00:11:04,520 --> 00:11:09,380
So really quickly I'm going to save this file and then I'm going to flip on over to my browser and make

155
00:11:09,380 --> 00:11:14,020
sure that I don't have any error messages such as the one that you see right here.

156
00:11:14,120 --> 00:11:19,100
So looks like I have a mistake on line 46 so I'm going to double check that really quick.

157
00:11:20,710 --> 00:11:25,190
Looks like I made a typo in response so I should be response instead.

158
00:11:25,240 --> 00:11:26,140
I'll fix that up that way.

159
00:11:26,170 --> 00:11:26,920
Go back over.

160
00:11:26,920 --> 00:11:29,800
I don't see any error messages besides that.

161
00:11:29,800 --> 00:11:34,620
So if you have any other erimus just extraordinarily likely that you just made a typo.

162
00:11:34,630 --> 00:11:36,100
Please read that error message.

163
00:11:36,100 --> 00:11:39,400
It will tell you the exact line that you made the typo on.

164
00:11:39,400 --> 00:11:44,380
Chances are you made a typo like me or you might have kind of messed up some syntax some of these objects

165
00:11:44,380 --> 00:11:46,120
or something like that.

166
00:11:46,150 --> 00:11:50,470
Now I would encourage you as well to make another double check of all of your types.

167
00:11:50,470 --> 00:11:51,130
So you should see.

168
00:11:51,130 --> 00:11:58,900
Create screen create stream batch streams streams that stream fetch stream and stream edit stream elite

169
00:11:58,900 --> 00:12:00,790
stream delete stream.

170
00:12:00,880 --> 00:12:02,250
All right so this looks great.

171
00:12:02,290 --> 00:12:05,130
So we've just knocked out a ton of work here all in one go.

172
00:12:05,140 --> 00:12:09,610
And this is going to save us a lot of time down the road because I'm not going to be saying to you like

173
00:12:09,610 --> 00:12:10,680
every other video.

174
00:12:10,690 --> 00:12:13,390
Oh yeah let's go put our action creator together.

175
00:12:13,450 --> 00:12:14,890
So let's take a pause right here.

176
00:12:14,890 --> 00:12:17,250
We'll come back the next section and continue working on her at.