Now that we have our AP server put together we need to make sure that any time that the user submits
our form from the stream create components we attempt to make Ajax request or a network request over
to our API running on localhost three thousand and one.
So to make a network request we're going to first define an action creator.
We're going to make sure that we wire up that action creator to our component 3D connect helper.
We're going to call the action creator from on Samit right here.
And then the action creator is going to use accedes to make the network request over to our API.
So let's get to it.
Now we got a little bit of set up to do the first thing I'm going to do is change back over to my react
application running inside the terminal.
I'm going to stop this thing and I'm going to install X-posts and redux thunk because we're going to
need both those to write out an asynchronous action creator.
So I'll let that do its thing in a while that runs.
I'm going to flip back over to my actions index such as file.
Now at the very top We're going to first import ASIO's from X-posts.
And you know what actually well it's full of the same pattern that we've been using all along.
Let's create a separate directory called API.
That's going to create an instance of Access.
So I'm going to remove that import statement right there.
And then inside of my SIRC directory I'm going to make a new folder called API.
And then inside there I'll make a new file called stream's.
Yes.
So inside of your we're going to create our instance of X-ers and then export it same way that we've
done all along.
So I need to import X-posts from X-posts and they'll do an export default X-ers dot create and I'll
set up as usual.
The base you are l.
So the base you are l for our API server is localhost three thousand one and we can verify that by going
back over to our second terminal window and making sure that we see home local those three thousand
one right here.
So from my base you are all put in HTP colon slash slash local host 3000 and one.
It's now all save streams.
Yes I'll close that file.
I'm going to go back over to my actions index such as file and at the top we will import that streams
API X-ers instance.
All right.
So at the top import streams from up one directory API is streams so we can now use this Acciona instance
right here to make requests over to our API.
Let's create a new action creator inside of your.
To handle this creation.
So down here I'm going to say export Konst create stream.
This is going to be called with a list of all those different values that we entered into our form as
an argument.
So I'm going to receive that as an argument for action creator that I will call about form values and
then we're going to define an asynchronous action creator.
Remember any time we make an asynchronous action creator we are making use of redux thunk.
So we want to return an arrow function from our action creator and the first argument to this function
is going to be the dispatch function.
Now we call that we can shorten up the syntax that you see here just a little bit.
So I can remove the outer curly braces so that went up there and the bottom line down here and then
I can remove the return statement and put this all onto one line like so.
And then optionally because I only have one argument on both sides I can remove the parentheses.
And then finally because the inner function is probably going to have some code that wants to use the
async await syntax going to put the async E-word in front of dispatch.
So then finally inside if you're going to say streams post I'm going to make a request to the streams
and point at localhost three thousand one and I'm going to try to put in all of my different form values.
So that's how we make a post request with X-ers right there.
All right.
So let's now flip back over to what stream creates.
We're going to hook up this action creator to that component and then we'll attempt to cull it and notice
that right now we are not dispatching any action.
We are not awaiting this thing.
Anything like that.
We're going to come back and add a lot of that stuff in in just a little bit.
For right now I just want to make sure that we can successfully create a new stream on our API.
All right.
So I going to save this file.
I'll flip back over to stream create at the top.
I'm going to import connect from re-act redux and I'm going to import my action creator as well.
So we call that create stream
from and this time the import statement is going to be a little bit complicated.
We want to go up to directory's and then get our actions folder.
So I'm going to go up wonder factory up a second directory and then get actions like so then we'll go
down to the very bottom and we need to look at that connect function.
Well there's a little bit of an issue here.
Notice how we have already wired up redux form in the exact same way as the connect function.
So it kind of seems like we're at a little bit of an impasse here.
How can we wire up both connect and redux form at the same time.
Well let's take a little quick pause here and I'll show you how we can very easily combine together
both the connect function and redux forum with some pretty simple syntax so quick but I'll see you in
just a minute.