In the last section we use redux form to manage each of our three inputs here remember by defining the 2
different fields at the bottom of our file here. 3
Title categories and content. 4
We got three properties injected into our prop's object fields title fields dot categories and field 5
stock content. 6
Each of these three objects right here contained a bunch of properties that are used to manage our different 7
form elements specifically the three the two inputs and the text area. 8
Again this is really handling or delegating control of each of these elements off to redux form. 9
We don't have to deal with them at all. 10
Redux form is doing it with us. 11
So there's just one step left the handle submit function right here. 12
So again redux form not only handles can trol of the inputs for us it also handles control of the submit 13
event here the handle Samit function that we got from redux needs an action creator before from us before 14
we can call it with the final form properties. 15
So what happens is when we when we submit the form handle submit is called and then we can optionally 16
pass in an action creator right here. 17
That will be calls when the form is submitted. 18
And it is valid. 19
So if we go in to find an action creator we can pass it to handle Samit right here. 20
And then the action Krater will be called with the properties from the form whenever the form is submitted 21
. 22
A little bit confusing I know. 23
So let's go ahead and just give it a shot. 24
I'm pretty sure that once we implemented it will be pretty clear what is going on here. 25
Basically what we need to do is make an action Creator that is going to receive the properties off of 26
this form right here and we'll take those properties and post them to the back end to create a new blog 27
post. 28
So let's give this a shot in our actions index file. 29
We will make a new action crater that will make a post request for us. 30
So let's define the action Creator First we'll export a function called create post. 31
And we're just going to assume that it's going to be called with the title categories and content from 32
the form. 33
So be an object that has the keys title content and categories but we'll just take it in as an argument 34
called props like so. 35
OK. 36
We can then go ahead and create our post request using X-posts. 37
So we'll say Consta request X-posts post make sure we got a post here instead of the usual get. 38
And then thinking back to the walks through the API that we did before. 39
All we have to do is do a post to the post and point. 40
So it's going to look just like this call right here. 41
We'll do a template string and we'll say route you are l posts and then API key. 42
And then we will return 43
create Post and the payload will be the request. 44
We haven't yet defined this action type right here so let's do that really quick at the top will define 45
expert Konst create post create post. 46
OK. 47
So again this will take some properties from the form and post them to this end point right here. 48
I think we did forget one thing we need to make sure that when we post the to this you are l right here 49
we need to actually pass along these properties. 50
So as a second argument we need to pass prop's like so. 51
OK this is looking better now. 52
OK so we've got our action creator. 53
We're ready to use it inside of the Post's new form. 54
So we're back over here and remember the ultimate goal is that we want to hand that action creator to 55
this handle Samit function. 56
So we want to somehow get the action creator into this component right here hand it to handle submit 57
and then whenever the form is submitted redux form will validate the inputs in here and then it will 58
call the action creator with the óg with all the data off of this form right here. 59
So at the top we'll go ahead and import our action creator 60
from going up into actions index like so. 61
OK. 62
So here's where things are going to start to get really really interesting. 63
Bear with me here please. 64
Just a little bit of patience. 65
Think back to how we usually pass a action creator into a component for a second. 66
OK. 67
Let's think about that. 68
In the past we imported the Kinect function and then we passed the action creator into Kinect and that 69
all happened down here at the bottom right. 70
OK. 71
So this time we've got redux form in here already. 72
So we need to somehow merge connect and redux form right here. 73
So here's where things start to get really really crazy. 74
Believe it or not redux forum has the exact same behavior as Kinect redux foran can be used to inject 75
our action creators into our component and create a container out of our component right here. 76
The difference between redux form and Kinect is that redux form has one additional argument to it. 77
This configuration object. 78
So as a quick comment right here lets do connect. 79
First argument is Nap's state to prop's second is map dispatch to prop's redux Florham. 80
First is form config. 81
Second is map states to prop's. 82
Third is map dispatch to process k. 83
So normally we would pass in. 84
You know if you are doing this with CONNECT we would say we don't want a map anything from Propp from 85
state here so we would pass and know for it and then the second value would we would pass in an object 86
with create post-START action creator this time around. 87
We've got redux form the first argument is the form configuration. 88
We've got that here. 89
The second is map state to prop's we don't have that in this case we don't need any state inside of 90
our form. 91
So we'll just say no. 92
And then the third argument is map dispatched to props and just as we did in post index we're going 93
to use the shorthand for action creator. 94
We're is going to pass in an object that has the name the action creator which is create post create 95
post. 96
OK. 97
So again just slight connect but we're using redux form instead. 98
And the arguments are slightly different. 99
You know they come in a different order. 100
So the net result of all of this is that just as if you are using connect we have access to this stuff 101
. 102
Prop stock create posed inside of our component now. 103
So again we need to hand that action Kreator to handle submit right here. 104
So we'll say this doc props dog create post. 105
I'll save this. 106
And I think we're ready to go ahead and give it a shot in the browser and then we'll do a quick review 107
on you know what's going on here since this is some pretty confusing stuff. 108
So flip over to Chrome let's refresh. 109
I'm going to flip over to the network really quick 110
and for my title I'll do my first blog post my categories will be programming new. 111
And then for the content. 112
Here let's grab some larm some input in whatever content you like. 113
It's totally up to you. 114
I'm just going to grab some Lorem have some here. 115
There you go 116
and we'll go ahead and submit it. 117
OK. 118
So here's the network request tab. 119
We got a status 201 back to old one which means hey that was successfully created. 120
So let's click on this. 121
You'll see that the response we got back has the categories it has the content as the title and it has 122
an ID which means our post was successfully created. 123
If I click on the headers tab here and go down to the request payload you'll see what we posted. 124
That endpoint we posted an object that has the categories content and title just what we needed. 125
Perfect is a quick little test just to make sure everything is working right. 126
Just do a little bit review here. 127
Probably the biggest point in confusion that I have in here when you know when I was first learning 128
all this stuff was how handle submit work with this dot props dot create post. 129
So again we're handling the responsibility of the form submission over to redux form here with this 130
handler handle submit when the form is submitted handle Samit is going to be called with the contents 131
of the form if the form is valid. 132
And right now the form is always valid because we haven't had any validation yet handles submit we'll 133
call our action creator with the contents of the form. 134
So that would be an object where the title is with excuse me an object that has a title where the value 135
is the input from here it will have another key categories where the value is from here and then another 136
key content where the value is from here. 137
So that object goes into our action creator as props. 138
Then we post it to the back end saving the post for us. 139
And that's the whole shebang. 140
So again kind of you know tough to get your head around there's a lot of magic floating around here 141
. 142
If any of this is still confusing I recommend you check out the redux form documentation. 143
It's really some very well written documentation. 144
So this is all looking good but we still don't have any validation on our form. 145
If I wanted to I could actually just go ahead and delete all this right here and then submit it and 146
you'll see that I successfully created a nother blog post right here. 147
Even though I didn't have any categories so let's go ahead and make sure that we can add some validation 148
in the next section.