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