In the video we created a new create stream action creator and then imported that along with the connect
function to our stream create component.
So now we need to somehow wire up this action creator to our component.
But as we just saw it's going to be a little bit challenging to hook up both the connect function and
redux form to this component.
So in Honestly in all honesty here we can absolutely do it but this syntax is going to look just a little
bit nasty.
So to do so we could call connect right here.
Place one set of parentheses and then wrap the entire statement all the way from the opening part of
redux form to the very end inside of another set of parentheses.
So there's the opening one and there's the closing one.
This would work out totally fine right here.
But very frankly we will use a slightly modified syntax.
So let me show you another way that we could write this out.
I want to remove the export default statement right there and I'm going to instead create a new variable
called form wrapped like so.
So the idea here is that we were making a form wrapped version of our stream create component and then
now at the bottom of the file we could put a another export default statement place or connect function
and then pass in form wrapped like so.
So that's how we can very easily stack up additional kind of nasty looking functions like this without
ending up with some crazy syntax.
So now getting back on track here we do not yet have a map state to prop's function but could pass in
null as the first argument and then as a second argument I'll put in my action creator of the stream.
Now finally inside of my component itself or find the on submit function and each time that the user
Smit's the form I'm going to make sure that I call this stop prop's dot stream or I forgot the name
of it.
Great stream there we go.
Reate stream and we will call it with all of our foreign values.
It's now whenever the user tries to estimate the form we're going to validate the inputs if the inputs
are valid we will call on submit on Sammet is going to call our action creator of create stream that's
going to run the Create stream action creator right here and we're going to attempt to make a request
over to our API server and create a new stream and we know that this is going to create a stream because
we are following restful conventions.
We are making a post request to slash streams.
All right.
So going to save all this and then recall that we had stopped our server to do a new install.
Back over here and you know what I'm actually looking at the new install We forgot one little stepper.
I forgot to step here.
We forgot to wire up redux thunk.
Let's do that really quickly.
While we do that let's start our server up as well with NPM start OK so well that goes I'm going to
flip back over to my roots index such as file.
So here's the root index file.
Remember inside here we had already set up the applied middle where we call in anticipation of wiring
up redux thunked So this is going to be really easy at the top.
I'm going to import redux thunk from redux dasht thunk and then I will make sure that I pass that into
the applied middleware call right here redux.
Thank all.
All right let's flip back over to our application.
Here we are.
I see my form on the screen so now I'm going to pull up in my network request log.
I'm going to filter by S.H. H.R. requests and I'll enter in some stream names so how about like my stream
and I'll give it a description or something like this is a great stream and then I'll submit.
All right so we see a little nasty error message here.
But I bet you can guess why we see this one.
Yeah.
Hold traditional.
We've got a callback function that we are passing off to a component and we did not bind it.
So let's make sure that we defined this with an arrow function.
Now I'll be honest with you I did not plan this error.
I plan on the one around render input.
When we ran into it.
But this is just an example of how often you tend to run into this stuff unfortunately.
All right let's save this flip back over again.
I'll say my stream.
This is a great stream.
And then I'll submit it.
And now I see two requests appear right here.
I see an options request which is totally fine.
And then I see a post request that just you know the options request right there is because we are making
requests to a server that is running on a different port.
This is related to corps request errors.
If you are a court enforcement policy if you've ever taken a look at core's errors before so it looks
like Course is working successfully here and we've got our post request that is returning a status of
201 which indicates that our stream was successfully created.
So now we can check to see if that stream was actually made or not to do so.
I can go back over in a new terminal window to the API directory that we had just created with that
DBI just on file.
Now if you are on a Mac OS or a Linux based system you can run cat D-B Jaison and that will print out
the contents of that file and now you'll see that the API server has automatically added a new record
to that file under the streams key.
This is our stream and it is automatically assigned an idea of one.
Now if you are running on Windows and cannot use the cat command you can always start up your code editor
inside this folder and inspect that file and just verify that the stream was created successfully.
OK.
That's pretty much it.
Again because we have followed restful conventions we didn't have to look up complicated documentation
or anything like that.
We just made a post request to the appropriate end point and our record was created for us.
So this is fantastic.
Now that we have the ability to create new streams it's time for us to focus back on the original streamlets
component and make sure that we can show a list of all the streams that have been created over here
as well.
But before we do let's also make sure that we start to put a little bit of thought into wrapping up
our create stream action carried over here.
So we got a couple of things that we're juggling simultaneously.
Let's take a quick pause here and we'll continue in the next video.