Singing we have to do inside of our post-New component is make sure that we correctly handles the middle
event.
So we've looked at some middle a little bit.
Previously we had said that on it will be called with an object that we are going to call values and
this object contains the post title categories in content inside of it.
So it's really going to be up to us to somehow take this values object and post it up to our API to
save it on our backend whenever we think about saving data or making API requests of any type inside
of a redux application.
We always want to be thinking about action creators.
So inside of on submit we really want to be calling an action creator and that action creator will be
responsible for posting the API or simply me posting the post into the API.
I think that will first start off by creating our action creator and put our API request inside of it.
After that we'll then figure out exactly how to hook it up to this on submit function.
And I say we'll figure out how because there are going to be just a little bit of challenges and exactly
how this all comes together.
So let's start off by changing over to our actions index not G-S file inside of here.
We'll get started by making a new action crater at the bottom.
So I say export function and we call it create post they'll receive the values object which will be
the blog post.
So the thing that actually contains the title categories in content than inside of here we can follow
the exact same syntax as we used on fecche posts.
We'll make a request to the X-C or to our API with accedes and then we will return an action which retape
which contains the request as the payload.
So let's make our request this time around.
We want to make a post type request to our back and API.
We want to send it to route.
So let's get those curly braces on their route you are l d make sure that you're using tactics around
this because we are using a string template.
We want to post it to the posts and point.
And we also want to provide our API key.
And finally we want to make sure that the request is made with the values from the form.
So as a second argument we'll provide values.
We haven't really used post requests with axially before they really follow the same type of method
signature as a get request so we're providing the URL is the first argument and then the second argument
is the object or the data that we want to send to this remote API.
Now we can create our action at the bottom or return it.
So we will return with a type of will we'll imagine that we're going to have a type in just a second
called create post and we'll have a payload of requests like so.
So let's make that type of create post.
Scroll up a little bit will say export Konst.
Great post and that will be create post.
OK.
This is looking pretty good.
Now before you hook this up to the component I want to kind of follow the action Kreator full circle
and by full circle I mean I want to go all the way over to the reducer and figure out what's really
going to happen inside the reducer when it sees an action of type create post.
So I to find my reducers folder and open up the reducer post file.
So you recall that inside of your are state object was an object.
It really is an object where the key is where the idea of individual posts.
And then the values were the actual posts themselves.
So I think that for right now maybe we will just leave the reducer as is and will come back in just
a second once we are really sure that we can create a post and get a response back from the back end
API.
Ideally we're going to get the post that gets returned from the API and inserted into our state object.
The reason I want to come over here right now is I want to just point out to you I want you to just
recall that right now as it stands this request object which presumably returns a post we can't just
take the values object right here and put it directly into our state array because the values object
does not yet have an ID associated with it.
So we can't really just arbitrarily throw something into our state object because we don't have any
idea to associate with this particular post.
All right.
So now we've got our action creator put together.
Let's change back to our Post's new file.
So here's post-New.
We're going to go up to the top of the file and up here we're going to go through the usual steps for
calling an action creator from this file.
We'll start off by importing the connecting paper from re-act redux.
And then we will import our action creator that we just created.
So import connect from reactor redux and then import create post from dot dot.
Actions and actions by itself is just fine.
We don't need to put index on there.
OK Snel usual task will go down to the bottom file and hook up the connect helper.
And when we go down to the bottom however we're going to see something a little bit interesting ha.
So if you recall redux form is already being used in the exact same style as our connect helpers so
how do we combine these two different helpers together.
How do we somehow get this really weird syntax right.
The weird syntax where we call connecter recall redux form and then put the second set of parentheses
with posts new.
We can do so by really just kind of mimicking the same type of syntax but layering up these different
helpers.
So I'm going to write in front of post-New.
I'm going to put a new line and then a newline right after it like so.
So you should see redux form the opening set of friends.
The closing set of friends and the set of friends around post-New.
So inside of here will place our connect call still say no and then the second set of friends for post-New
and for the second argument will do.
Create.
Post the action creator.
So this is how we stack up multiple connect like helpers.
We take connect.
As usual this writes to this statement right here.
It does return a react component and so that is a valid input into the redux form helper.
So the result of this gets put in as the second set of parentheses for the redux form helper.
OK so I think we're about ready to give this a shot.
By wiring up the action creator.
Let's go back up to on submit and go back up to smit right here and the last thing we have to do is
call that auction creator.
So say this Propst create post and we'll just pass in our values.
Ok I think we're about ready for a test inside the browser.
Now I'm going to change back over a refresh the page and in my chrome console.
I'm also going to pull up my network tab so I can to make sure I'm filtering by ex-aide char requests
right now.
So I really hope to see a post request being issued to our back in API as soon as we click that submit
button.
So put in a title of my post will say as a category of javascript and this is my post so I'll submit
and OK so it looks like I get two requests on here the first request let me get some space in here.
Well there we go.
So we look at the first request.
You'll notice it has a request method of options and options type request is used whenever we are making
it cross Orjan resource sharing type requests.
And really that's a fancy term for just saying that we are making an Ajax request that's going from
local host ADHD to a completely different domain of Heroku app dot com Kross Orjan resource sharing
or course for short is a security feature that is present inside of your user's browser to present or
to prevent malicious type code from making requests to other domains.
There's a ton of documentation online on course your quest if you're at all curious about them and exactly
what the role of his options request is.
So we really care about is the second request which was the post request.
So looks like we got back a status code of 201 created.
And if I click on the preview tab I see my category is content title and most importantly I have an
ID as well.
So looks like the post was successfully created.
That's definitely good.
If we go back to the index page now the instant we go back to the index page the index page will refed
that's our list of posts and we can now see the new post appear on the screen.
Now it looks like everything is working but there's one very awkward piece of this flow.
You'll notice that.
Let's do another post.
So I'll clear up my log here.
All submit and.
OK.
Looks like it was created as well.
But when I click Submit right here my intent or what I would really like to have happen is to make sure
that my user gets redirected automatically back to our list of posts.
So we need to somehow make sure that once the post has been created we actually navigate the user somewhere
else.
So to take a quick break and figure out how to take care of that navigation in the next section.