1 00:00:01,670 --> 00:00:08,790 In the last section we implement to navigation between the Post's index page and the Post's new page 2 00:00:09,210 --> 00:00:12,520 using the link component from re-act router. 3 00:00:12,990 --> 00:00:18,270 In this section we're going to continue with Step 4 of adding our new feature we need to flesh out the 4 00:00:18,270 --> 00:00:22,970 form that users will use to create a new blog post. 5 00:00:23,520 --> 00:00:30,200 Looking back at our mockup for the blog post form we have a title some categories in some content. 6 00:00:30,230 --> 00:00:32,130 It's pretty straightforward. 7 00:00:32,130 --> 00:00:37,020 Now we've already created input elements in the past but this time our form is going to be different 8 00:00:37,020 --> 00:00:37,470 . 9 00:00:37,470 --> 00:00:41,160 We're going to actually require some validation of the inputs. 10 00:00:41,160 --> 00:00:48,660 Validation is the process of making sure that the data that the user enters is correct or accurate or 11 00:00:48,780 --> 00:00:55,410 at least to some requirements that we impose we're going to set up validation on our posts create form 12 00:00:55,680 --> 00:00:59,720 to require users to always enter text into each field. 13 00:00:59,790 --> 00:01:05,340 So if the users say doesn't enter a title but they do enter a category in the content we're going to 14 00:01:05,340 --> 00:01:06,290 say no. 15 00:01:06,330 --> 00:01:08,090 You know this form is not valid. 16 00:01:08,310 --> 00:01:12,440 You need to add some additional information for you can cement this blog post. 17 00:01:12,600 --> 00:01:17,640 And specifically we're going to show it in the form of highlighting this input read in showing some 18 00:01:17,640 --> 00:01:20,420 text on here as well. 19 00:01:20,460 --> 00:01:27,150 So to help us with building a form we're going to make use of a library called redux form which is probably 20 00:01:27,150 --> 00:01:29,940 one the best darn little libraries around redux. 21 00:01:30,030 --> 00:01:31,890 It's really a pleasure to use. 22 00:01:32,250 --> 00:01:37,830 So let's get started by checking out some of the documentation for the library in a browser. 23 00:01:37,830 --> 00:01:41,710 I'm going to go ahead and search for redux form 24 00:01:44,970 --> 00:01:51,320 and then as the top link on here you're specifically looking for Eric wrasse redux form. 25 00:01:52,670 --> 00:01:54,730 So this will take you to the github page. 26 00:01:54,900 --> 00:01:57,450 You can read some of the documentation on here. 27 00:01:57,480 --> 00:01:59,390 It's got some links right here. 28 00:01:59,580 --> 00:02:04,400 They also have a fantastic home page to here at the top which are going to go to. 29 00:02:06,150 --> 00:02:10,020 And same set of documentation on here as well. 30 00:02:10,090 --> 00:02:16,080 I'm going to pop open the getting started right here and you can see that's got a fantastic implementation 31 00:02:16,080 --> 00:02:16,710 guide. 32 00:02:16,890 --> 00:02:18,660 We're going to go through all these steps right here. 33 00:02:18,660 --> 00:02:23,610 But if you know as the as we go through these steps and you look kind of funky or kind of weird you 34 00:02:23,610 --> 00:02:26,240 can always refer back to the documentation. 35 00:02:26,340 --> 00:02:29,790 It's pretty darn clear what's going on with the documentation here. 36 00:02:29,820 --> 00:02:34,650 So don't don't be afraid to pause the video and check out some of the docs. 37 00:02:35,570 --> 00:02:37,100 OK. 38 00:02:37,110 --> 00:02:40,340 So the first thing we need to do is install this library. 39 00:02:40,410 --> 00:02:47,850 And like all of our other libraries we're going to install it using NPM so at my terminal I'm going 40 00:02:47,850 --> 00:02:49,470 to go ahead and install 41 00:02:52,380 --> 00:03:01,080 redux florham with NPM install dasht just save redux form and we're gonna install a specific version 42 00:03:01,200 --> 00:03:04,650 just because API again does change from time to time. 43 00:03:04,740 --> 00:03:05,960 Four point one. 44 00:03:05,970 --> 00:03:06,720 Point three. 45 00:03:06,750 --> 00:03:11,360 So we'll say at four point 1.3. 46 00:03:13,530 --> 00:03:19,470 And this should just take a second to install it's pretty darn lightweight gone. 47 00:03:19,560 --> 00:03:22,320 Looks good. 48 00:03:22,320 --> 00:03:26,390 So the first thing we need to do with redux form is hook it up to our reducer. 49 00:03:26,430 --> 00:03:32,490 We're going to talk to exactly how redux form works but let's just do the set up real quick get it over 50 00:03:32,490 --> 00:03:37,070 with and then we can jump into your description of how it all comes together. 51 00:03:37,110 --> 00:03:48,150 So inside of our reducers index not just file we will import reduce reducer has Formery douceur 52 00:03:52,020 --> 00:03:54,410 from redox form. 53 00:03:54,630 --> 00:03:57,530 We haven't used this kind of syntax here before. 54 00:03:57,570 --> 00:04:04,830 All this is doing is Sayne import redux form grab the reduce or property off of it and then create a 55 00:04:04,830 --> 00:04:08,160 variable with it named former douceur. 56 00:04:08,220 --> 00:04:09,590 This is just done to. 57 00:04:09,630 --> 00:04:14,980 It kind of has a convenience by the author of redux form to avoid any naming conflicts with other reduce 58 00:04:14,980 --> 00:04:19,620 areas that we might be importing into this file. 59 00:04:19,620 --> 00:04:27,330 Next we'll add the reducer to our existing combined reducers call specifically with the key form. 60 00:04:27,330 --> 00:04:33,630 Make sure you use form here and not anything else and will say form reducer. 61 00:04:33,720 --> 00:04:37,740 So Farmer do server farm reducer or cool. 62 00:04:38,790 --> 00:04:45,840 Now we need to do is set up our posts new component to use redux form before we do that though. 63 00:04:45,930 --> 00:04:50,760 Let me tell you a bit about what's going on behind the scenes with redux form. 64 00:04:50,760 --> 00:04:54,750 I'm going to pull up a diagram to explain what's going on with it in this diagram is going to look a 65 00:04:54,750 --> 00:05:00,120 little bit weird but you know bear with me will do the time of initial walkthrough and then I think 66 00:05:00,270 --> 00:05:06,210 as we start to go through the process of wiring up redux form stuff is going to make a lot more sense 67 00:05:06,230 --> 00:05:06,660 . 68 00:05:08,640 --> 00:05:15,680 OK so this diagram is kind of a combination of you know what's going on behind the scenes. 69 00:05:15,700 --> 00:05:21,460 And when we actually run our application and the combination of you know how we're going to wire up 70 00:05:21,460 --> 00:05:27,360 redux for him let's see if we get a decent zoom level right here I think this is good. 71 00:05:27,610 --> 00:05:27,950 OK. 72 00:05:28,000 --> 00:05:30,940 So the diagram is intended to go from left to right. 73 00:05:31,330 --> 00:05:34,520 And again it's kind of the process of what's going on. 74 00:05:34,600 --> 00:05:42,810 This first box right here is a word of this in terms of a you know letter sending letters or e-mail 75 00:05:42,820 --> 00:05:45,030 over to the redux form library. 76 00:05:45,220 --> 00:05:48,550 So this is the redux form this is our first letter right here. 77 00:05:48,850 --> 00:05:54,130 So the first thing we're going to do we set up redux form is we're going to tell it hey I'm creating 78 00:05:54,130 --> 00:06:00,940 a new form in my application and that form is called post new That's the name of the form. 79 00:06:01,720 --> 00:06:09,090 When I create this form there are going to be three different inputs on the form they are named. 80 00:06:09,130 --> 00:06:10,780 And we're going to name each of them. 81 00:06:10,780 --> 00:06:13,040 Title categories and content. 82 00:06:13,090 --> 00:06:18,850 So here you go here's a new form called post-New and it has three fields that I want she had take care 83 00:06:18,850 --> 00:06:25,210 of read X form takes this information that we've declared you know says OK like you know I see this 84 00:06:25,210 --> 00:06:26,530 new form. 85 00:06:26,530 --> 00:06:32,290 I can go ahead and keep track of this stuff and it replies to us. 86 00:06:32,290 --> 00:06:35,790 Sure thing no problem I can I can handle each of these forms. 87 00:06:35,790 --> 00:06:38,360 Just tell them that I'm going to manage them completely. 88 00:06:38,380 --> 00:06:40,300 You don't have to touch any of the forms at all. 89 00:06:40,300 --> 00:06:42,110 I'm going to manage them myself. 90 00:06:42,340 --> 00:06:49,270 So it implements its own set of rules for each field that we need to basically introduce to each field 91 00:06:49,270 --> 00:06:54,870 I mean to say hey input you're being managed by redux form now I don't want to touch you at all. 92 00:06:54,910 --> 00:06:58,090 I don't want to know what's going on with you whenever something happens to you. 93 00:06:58,090 --> 00:07:00,250 Just go ahead and tell redux form. 94 00:07:00,250 --> 00:07:06,730 So again we're kind of passing control off of our inputs over to redux form. 95 00:07:06,730 --> 00:07:12,790 In addition we're not only passing off the inputs but we're also passing off the entire form object 96 00:07:12,790 --> 00:07:13,770 in general. 97 00:07:13,780 --> 00:07:20,380 Remember in our previous section when we implemented our weather search spot at the top we used a form 98 00:07:20,410 --> 00:07:25,460 element we're going to use a form element again for this application for this form. 99 00:07:25,460 --> 00:07:27,690 And you know an actual age TNL form tag. 100 00:07:27,910 --> 00:07:34,930 And so redux form is also going to be in charge of handling the submission of that form as well redux 101 00:07:35,150 --> 00:07:38,220 form is then going to pass back some properties to us. 102 00:07:38,230 --> 00:07:43,330 It's going to say okay like I can handle all of this stuff I can take over your fields for you. 103 00:07:43,330 --> 00:07:47,790 I can manage the the forms the middle but you need to do me a favor. 104 00:07:47,790 --> 00:07:53,110 You need to make sure that each of those components you know the three inputs and the form knows about 105 00:07:53,110 --> 00:07:54,760 these set of rules I have for them. 106 00:07:54,820 --> 00:08:03,460 So it passes back an object to us in the form of some props and those props are specifically specifically 107 00:08:03,460 --> 00:08:05,920 going to be a handle submit call. 108 00:08:05,920 --> 00:08:10,220 So you know this function should be called whenever the form attempts to be submitted. 109 00:08:10,510 --> 00:08:19,210 And it's also got an object of fields with title categories and content it knows about the existence 110 00:08:19,210 --> 00:08:24,160 of these fields because we declared them back here in the initial setup process and then we said hey 111 00:08:24,160 --> 00:08:26,180 here are these three fields. 112 00:08:26,800 --> 00:08:33,490 So we're going to take the Handelsman function and then fields dot title fields dot categories and fields 113 00:08:33,500 --> 00:08:34,520 dot content. 114 00:08:34,750 --> 00:08:37,680 And we're going to pass them directly to our H.T. team. 115 00:08:37,720 --> 00:08:42,370 You know really our GSX tags we're going to pass them directly to the different input elements that 116 00:08:42,370 --> 00:08:44,560 we declare. 117 00:08:44,560 --> 00:08:49,690 So the net result all of this is that we're going to take fields that title we're going to make sure 118 00:08:49,690 --> 00:08:52,740 that we pass that configuration to this input. 119 00:08:52,810 --> 00:08:55,040 We're going to take fields of categories. 120 00:08:55,300 --> 00:08:57,890 We're going to make sure we pass it to this input. 121 00:08:57,940 --> 00:08:59,460 We're going to take field Zuk content. 122 00:08:59,470 --> 00:09:03,970 You know you kind of get the idea of where this is going and make sure that it goes to this text area 123 00:09:04,050 --> 00:09:07,010 you know not we're not using and we using an textarea here. 124 00:09:07,330 --> 00:09:13,030 And finally whenever this form is submitted so you know the user clicks the submit button here we need 125 00:09:13,030 --> 00:09:21,520 to make sure that we call this handle submit function that's passed to us by redux form read X is going 126 00:09:21,520 --> 00:09:28,600 to Orsini redux form is going to take this handle Samit function and is going to you know do some massaging 127 00:09:28,600 --> 00:09:32,800 the data blah blah blah and stuff I don't want to get too much into it right now let's talk about that 128 00:09:32,860 --> 00:09:33,780 when we get there. 129 00:09:33,940 --> 00:09:39,760 But basically we're going to use this handle Samit function in conjunction with an action creator and 130 00:09:39,760 --> 00:09:45,160 that action creator will get handed the final values from the form and the final validated input for 131 00:09:45,160 --> 00:09:46,210 us. 132 00:09:46,210 --> 00:09:50,590 So again you know we're going to watch this entire process. 133 00:09:50,590 --> 00:09:56,740 I just want to give you kind of a overall overview before we delve into it because once you dive in 134 00:09:57,040 --> 00:10:00,700 a lot of the stuff that happens here is really going to look like magic because it's really going to 135 00:10:00,700 --> 00:10:02,890 be very easy to put the form together. 136 00:10:02,940 --> 00:10:06,400 Why won't she have an idea of kind of what's going on behind the scenes here. 137 00:10:06,820 --> 00:10:07,300 OK. 138 00:10:07,390 --> 00:10:12,240 With all this in mind let's go ahead and start wiring this all up in the next section.