In the last video we finished up our create stream action creator.
So now after we create our new stream our response we get back has the newly created stream model according
to our API with the new ID inserted in there.
And so we are now going to dispatch an action that has a payload of the data that we got back in response.
Now before we move on and start working on reduce or anything like that I want to point something out
about following these restful conventions inside of our application.
Now I took that restful conventions chart right here and I added on a new column that says response.
My response right here.
I mean to indicate what our API server is going to return anytime that we make this type of request
to it.
So if we make a request to slash streams we're going to get back an array or list of records a get for
a single record will return a single record a post two streams will return the record we just created
a PUT will return a single record and a delete to a single record is going to return nothing at all.
So if we are truly following restful conventions then you and I kind of already know exactly what our
responses are going to be from that API server.
So I kind of have a crazy thought here.
Even though we do not have any component to show a list of streams even though we don't have a component
to edit a stream even though we don't have a component to delete a stream.
Even though we don't have any components put together right now because if we follow restful conventions
we know exactly what data we are working with.
I think that we could actually create all of our action creators right now and kind of get the entire
process of writing out these action creators done with right now as opposed to having to always come
back to the actions index not as file and creating each of these different action creators as we work
on each different part of the application.
Again we are only able to do this because we are following restful conventions to a tee.
We're doing exactly what is recommended with them.
So I think that's what we'll try doing.
We're going to try to put together all of our action creators right now an action creator for creating
a stream or fetching a list of streams for getting one for editing and deleting and then we're going
to try to eventually wire these all up to our different components when we eventually create them.
Now it's entirely possible that we might make a mistake here or there but I think that in general this
might actually work out.
All right.
So let's give it a shot.
So we're going to create separate action creators for each of these different operations.
We already did one for creates.
So we're going to essentially make for others.
The first thing we're going to do is create types inside of our type start J.S. file one for each different
operation that we expect to do.
So inside if you're going to write out a couple of different types I'm going to add in export Konst
batch streams as fetch streams.
So this will be the type for whenever we get all of the different streams that exist inside of our API.
I'll do a export Konst fetch stream that singular so there's no it's not deemed stream.
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
by itself.
So fetch stream will do a delete stream.
They'll eat.
Sorry my hands are really cold right now making all these typos.
OK we've got delete.
I think we need the update.
So this will be something like maybe edit stream
so edit Stream.
And I think that's about it.
I think we've got all five cases.
So creation fetching a list fetching an individual deleting a record and editing a record.
Now that we've got all these types put together we can import all five of them or the remaining four
I suppose back into our actions index not just file and then create action crater's for each one.
So I'll put the import statement for my types at the top.
I'm going to first give myself a little bit of space here.
I'm making this into a multi-line import statement like so.
And then I'll get all of those other types that we just created.
Now as a quick shortcut here if you are on the code or using Adam right now you can use that command
D or control d hot key to very quickly copy paste all these types over.
So if you want to you can highlight say can strike here and then hit either command or control.
If you are on Windows and that will multi-select conc like so then you can hit right arrow twice to
get the cursor next to all those types and then you can do a little shift select like so to get each
of those different types and then copy all that go back over to the index file and paste them all in
like so.
Now if you're not going use that shortcut totally fine.
Just make sure that you import each of these different types and then get a comma after each one except
for the last one.
Now after you do all that I recommend you save the file flip back over to the browser and just make
sure that you're not getting the error message saying something like Oh this type doesn't exist if you
are seeing an error message saying that some given import does not exist.
It very likely means that you made a typo ok.
Now that we've got all of our types Let's try putting together an action creator for one of our most
basic actions which is to fetch a list of all the different records that we have on that API so underneath
create Stream right here we're going to create a new action creator that we'll call something like fetch
streams.
So this is going to be an arrow function that returns a funk function like so.
And then inside of here we're going to follow our restful conventions.
I can't say it enough so we're going to make a get request to slash streams using our ASIO's instance
Zola's say construct Spawn's is a waste stream start get flash streams and then I'll do a dispatch with
a type of fetch underscore streams and a payload of response data like the.
So it can essentially just repeat this process a couple times over.
I would encourage you to not do a copy paste here just because it's going to increase the probability
of you accidentally forgetting to change like a typo or something like that.
So I would encourage you to type each of these out and triple check to make sure that you've got the
correct function name and the correct type inside of each one as well.
The next one will do is the patch for a single record.
Now notice when we fetch a single record we need to know the idea of the record that we're trying to
fetch.
So we'll create a new action creator called fetch stream.
So no s on here because this is fetching just one stream as opposed to multiple.
And then when we call this action creator we're probably going to want to pass in the idea of the stream
that we are trying to fetch.
So on the initial function right here the actual action creator function I want to make sure I pass
in some ID argument and I'll do my async dispatch and inside of your I'll say Konst response.
So we'll do our streams Dogget And then this time we want to make a request to slash streams slash and
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
here.
So put in my back ticks like so and I'll say slash dreams slash dollar sign curly brace ID.
And then I'll do a dispatch type of fetch stream.
So notice here on stream's we have streams so s and s on fecche stream individual one we have Fettes
stream no s and no s on the type there as well.
Then for our payload we'll do a response loop response data like so OK.
Just two more I think just edit and delete.
So let's do our edit stream action creator.
Now this one is going to be a little bit more challenging.
Anytime that we edit a stream or try to update it we need to provide both the ID and the update that
we're trying to make to that stream as arguments to the actual creator.
This is one where Ill make a little bit more sense later on when we start working with this creator
more directly.
But essentially we want to kind of combine the idea of receiving the idea as an argument from fecche
dream with the idea of passing inform values that we used up with create stream as well.
So for it stream I'm going to receive the ID of the record I want to edit along with some form values
that contain the actual updates I want to make to that particular stream.
So then again do an async dispatch.
Got my Konst response streams dot and then in this case we are making a put type request try to make
a point type requests with axially will call streams dot put and then just as before we need to make
sure that we specify the actual ID of the stream that we're trying to edit I'll use a template string
again and I'll do streams slash dollar sign ID and then we need to make sure that we communicate the
updates that we want to make.
So in the body of this put request will specify form values
and then we will again dispatch type edit stream that the payload of response data.
And then finally the very last one is going to be delete.
So were going to make a delete type request to that give an ID.
And in this case we get nothing back.
So our Palit property this time round is going to be just a little bit different.
Its all due in export Konst delete stream.
This will be called with some ID.
I'll get my async dispatch.
I'll do Konst response.
It.
Actually we don't actually need any response in this case because the response is going to be empty
so I'll just leave that off and I'll do an oh wait streams start.
Delete.
So that's how we make a delete request with X-ers.
And then again we need to specify which stream we're trying to delete so I'll put my back ticks in for
a template string and I'll do stream's slash dollar sign.
Really brace ID.
Now in this case and we do our dispatch we're not going to have any payload data property we will have
a payload but we're not going to put the response data on there.
So I'll do a dispatch type delete stream and then this time around I'll put on a payload for the payload.
I'm just going to put in the idea of the stream that we just attempted to delete like so and this is
going to make a lot of sense a lil bit later on when we start to write out our.
OK.
So that's pretty much it.
We were able to write out all of our different action creators because we are following restful conventions
and we know exactly what route we are trying to make a request to what information each request type
needs in terms of like ID and updating with some information.
And we know exactly what the response is going to be in each case and that's the only reason that we
were able to write out these kind of early drafts of each of our action creators.
So really quickly I'm going to save this file and then I'm going to flip on over to my browser and make
sure that I don't have any error messages such as the one that you see right here.
So looks like I have a mistake on line 46 so I'm going to double check that really quick.
Looks like I made a typo in response so I should be response instead.
I'll fix that up that way.
Go back over.
I don't see any error messages besides that.
So if you have any other erimus just extraordinarily likely that you just made a typo.
Please read that error message.
It will tell you the exact line that you made the typo on.
Chances are you made a typo like me or you might have kind of messed up some syntax some of these objects
or something like that.
Now I would encourage you as well to make another double check of all of your types.
So you should see.
Create screen create stream batch streams streams that stream fetch stream and stream edit stream elite
stream delete stream.
All right so this looks great.
So we've just knocked out a ton of work here all in one go.
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
every other video.
Oh yeah let's go put our action creator together.
So let's take a pause right here.
We'll come back the next section and continue working on her at.