1 00:00:01,530 --> 00:00:08,270 Bar none my favorite library in the redux ecosystem is redux form is just such a fantastic library. 2 00:00:08,270 --> 00:00:13,830 Very well put together it makes it incredibly simple to put together rather complex forms with a lot 3 00:00:13,830 --> 00:00:18,960 of automatic handling of validation and submission and all that kind of good stuff that goes along with 4 00:00:18,960 --> 00:00:19,980 forms. 5 00:00:20,370 --> 00:00:25,260 I'm looking at a form that was created with Reebok's form and is themed around creating a blog post 6 00:00:25,890 --> 00:00:33,060 so I can enter a title like let's say a blog post a category like post and some content like Lorem and 7 00:00:33,070 --> 00:00:34,870 some what have you. 8 00:00:34,950 --> 00:00:39,360 And then if I want to I'd go ahead and submit the form and right now I've just got an alert that pops 9 00:00:39,360 --> 00:00:41,770 up and says the Post has been submitted. 10 00:00:41,880 --> 00:00:44,700 This forum also has built in validation like so. 11 00:00:44,970 --> 00:00:50,640 So if I don't have any text in a particular input I get a nice read error message just to let my user 12 00:00:50,640 --> 00:00:50,660 . 13 00:00:50,660 --> 00:00:53,280 Hey you need to put some content in here before you can. 14 00:00:53,370 --> 00:00:56,640 You can proceed since form works fantastic right now. 15 00:00:56,640 --> 00:00:58,080 It's a great spot. 16 00:00:58,080 --> 00:01:00,430 It's using redox form which is fantastic. 17 00:01:00,420 --> 00:01:02,790 There's just one small issue with it. 18 00:01:03,240 --> 00:01:06,530 Let's look at the code for this particular form. 19 00:01:06,600 --> 00:01:08,570 So here's my form component. 20 00:01:08,580 --> 00:01:13,110 This is a single component that is in charge of the entire form and wow. 21 00:01:13,110 --> 00:01:14,580 Here's the random method. 22 00:01:14,580 --> 00:01:19,620 This is about well I don't know 20 25 maybe 30 lines long. 23 00:01:19,620 --> 00:01:25,080 The random method and it's got a tremendous amount of very repetitive logic in here. 24 00:01:25,230 --> 00:01:30,300 You can see that I've got three kind of medium level divs So I've got a div here. 25 00:01:30,360 --> 00:01:34,570 I've got a div here and a div right here. 26 00:01:34,590 --> 00:01:38,100 Each of these divs have very repetitive logic inside them. 27 00:01:38,150 --> 00:01:45,040 They have something about a very particular field being touched or invalid has a field label. 28 00:01:45,270 --> 00:01:51,110 The fields helper and some more stuff making use of the field helper to handle validation. 29 00:01:51,180 --> 00:01:55,490 Also down at the bottom of this file is my validate function and so down here. 30 00:01:55,500 --> 00:01:57,800 I've also got some more repetition as well. 31 00:01:58,050 --> 00:02:03,720 I'm saying if a tile doesn't exist with category's doesn't exist or if content doesn't exist then show 32 00:02:03,720 --> 00:02:05,430 the give an error message. 33 00:02:05,430 --> 00:02:07,410 So this form right now it works fantastically. 34 00:02:07,410 --> 00:02:12,660 It definitely gets the job done but there is a tremendous amount of very repetitive code inside this 35 00:02:12,660 --> 00:02:13,560 component. 36 00:02:13,890 --> 00:02:19,410 So let's work through in this video doing a quick refactor to really Pardie on the size and kind of 37 00:02:19,430 --> 00:02:24,030 reducing the complexity of this form make it easier to make some quick updates in the future if we so 38 00:02:24,030 --> 00:02:26,310 require. 39 00:02:26,310 --> 00:02:30,540 Since there's a pretty good amount of form or code inside this component right now I put together a 40 00:02:30,540 --> 00:02:33,780 quick diagram just to make it really clear how the file is organized. 41 00:02:34,170 --> 00:02:39,400 So our file post-New has a couple different sections to it at the top. 42 00:02:39,420 --> 00:02:41,310 Are some import statements. 43 00:02:41,310 --> 00:02:46,080 We've then got our re-act component with the render method and down at the bottom is our validation 44 00:02:46,080 --> 00:02:46,650 function. 45 00:02:46,680 --> 00:02:49,860 And finally some export statement done here as well. 46 00:02:50,070 --> 00:02:56,700 So between the render method the validation function and the export statement there is a pretty good 47 00:02:56,700 --> 00:03:01,390 amount of shared code or kind of shared logic or duplicated logic I should say. 48 00:03:01,830 --> 00:03:06,480 Let's see if we can't do some refactoring to make this a little bit easier. 49 00:03:06,510 --> 00:03:11,720 The first thing I'm going to do from my refactor here to condense this component down big time is I'm 50 00:03:11,720 --> 00:03:14,400 going to import the load hash library. 51 00:03:15,000 --> 00:03:20,220 I have already installed load ASH using NPM so I can import it as underscore from load asked right at 52 00:03:20,220 --> 00:03:21,810 the top. 53 00:03:21,810 --> 00:03:25,170 Now let's look at our first refactor our first opportunity. 54 00:03:25,170 --> 00:03:30,780 You'll notice that down at the bottom I've got my form configuration with the redux form higher order 55 00:03:30,780 --> 00:03:31,980 component. 56 00:03:32,280 --> 00:03:34,820 I've got an array of fields down here. 57 00:03:35,010 --> 00:03:41,430 Title categories in content and as fields definition is what generates all the different field helpers 58 00:03:41,670 --> 00:03:43,610 within redux form. 59 00:03:43,620 --> 00:03:48,530 Title categories and content are repeated all over the place inside my component. 60 00:03:48,690 --> 00:03:51,550 Here's a couple of uses right here and certainly up in the Rentner method. 61 00:03:51,540 --> 00:03:53,220 There's another couple as well. 62 00:03:53,580 --> 00:03:58,530 So for the first three factor I mean to suggest that we pull the definition of these fields up to a 63 00:03:58,530 --> 00:04:01,390 toplevel constant and maybe we can. 64 00:04:01,680 --> 00:04:05,640 Then we can use that a little and we can leverage it a little bit to figure out some refactoring that 65 00:04:05,640 --> 00:04:06,780 we can do. 66 00:04:07,500 --> 00:04:09,900 So I'm going to take my array fields here. 67 00:04:09,900 --> 00:04:11,880 I'm going to cut it for right now. 68 00:04:11,880 --> 00:04:15,900 Go back up to the top of my file and I'm going to declare a new constant. 69 00:04:15,900 --> 00:04:19,400 Fields like so. 70 00:04:19,920 --> 00:04:25,350 So the intent here is to create an object at the very top level that has some information about the 71 00:04:25,350 --> 00:04:28,570 configuration of the fields within my form. 72 00:04:28,620 --> 00:04:32,940 I probably want to have more information about the configuration for each of these fields than just 73 00:04:33,030 --> 00:04:34,040 a simple string. 74 00:04:34,050 --> 00:04:36,440 So I'm going to turn this into an object instead. 75 00:04:36,570 --> 00:04:39,420 And the reason for this will be clear very shortly. 76 00:04:39,570 --> 00:04:42,410 It's going to come at that for just a second. 77 00:04:42,930 --> 00:04:44,070 We're going to have an object 78 00:04:46,590 --> 00:04:50,720 where each key is the name of the field. 79 00:04:56,690 --> 00:04:58,040 Like so. 80 00:04:59,060 --> 00:05:04,530 So now for each field in my component I'm going to pass in a little bit of configuration right here 81 00:05:04,620 --> 00:05:09,460 do to kind of provide a little bit of configuration for each particular form. 82 00:05:09,800 --> 00:05:16,180 In the case of the title field the type of field that I want to show are the type of age female input 83 00:05:16,230 --> 00:05:21,240 that the actual form element I want to display on the screen is should be an input right. 84 00:05:21,350 --> 00:05:23,220 That's what we saw back in the browser. 85 00:05:23,360 --> 00:05:28,570 So just to kind of demarcate that or just to kind of indicate that my configuration is needs to be of 86 00:05:28,570 --> 00:05:33,690 type input and repeat the same process for my other two fields as well. 87 00:05:34,000 --> 00:05:39,720 I've got another type of input and my last one this is actually not an input but a text area. 88 00:05:39,800 --> 00:05:45,110 So the market is being specifically a text area like so. 89 00:05:45,130 --> 00:05:49,120 Now the thing I'm going to add into my form configuration is the label that I want to use. 90 00:05:49,150 --> 00:05:55,160 So this is the label that's going to actually appear on my form so I'm going to place the label USA 91 00:05:55,310 --> 00:05:56,740 title for post 92 00:05:59,940 --> 00:06:04,980 another label of enter some categories this post. 93 00:06:05,500 --> 00:06:10,170 And finally a label of post contents. 94 00:06:10,270 --> 00:06:17,140 So the actual contents of the post you know the really the blog post itself or forum post whatever our 95 00:06:17,140 --> 00:06:18,810 forum is trying to achieve. 96 00:06:19,150 --> 00:06:24,590 So now this Oggi drive here represents some configuration for each of the three fields within my application 97 00:06:24,600 --> 00:06:24,810 . 98 00:06:25,000 --> 00:06:30,710 Let's see if we can't now use this configuration to dramatically condense down the amount of code within 99 00:06:30,700 --> 00:06:32,360 my post new component. 100 00:06:32,770 --> 00:06:37,600 So the first thing I'm going to do to make use of this Field's configuration object is and go back down 101 00:06:37,610 --> 00:06:43,700 to the bottom and where we remove the fields inside the redux form helper. 102 00:06:44,020 --> 00:06:46,090 I still need to pass on a list of fields here. 103 00:06:46,190 --> 00:06:49,340 My Field's house to be an array of strings. 104 00:06:49,970 --> 00:06:53,420 Each string has to be the name of the field within my component. 105 00:06:53,410 --> 00:07:01,540 So now using my configuration object I can use the load as helper keys on the fields configuration object 106 00:07:01,560 --> 00:07:01,740 . 107 00:07:01,940 --> 00:07:07,550 So this will return an array of all the different keys on the fields configuration object which will 108 00:07:07,540 --> 00:07:13,640 end up being title categories and content an array of strings. 109 00:07:13,630 --> 00:07:14,870 Exactly what I need. 110 00:07:15,250 --> 00:07:17,190 So that's a good first refactor. 111 00:07:17,750 --> 00:07:20,340 Let's continue a little bit more actually at first. 112 00:07:20,560 --> 00:07:24,890 Just as a kind of validation here let's make sure that we're not breaking anything as we go. 113 00:07:24,890 --> 00:07:28,780 So I don't flip back on the browser let's refresh and make sure we don't have any errors or anything 114 00:07:28,780 --> 00:07:29,850 like that. 115 00:07:29,890 --> 00:07:36,290 Looks like I can still click then I can enter some text I can submit it and I still get my alert message 116 00:07:36,280 --> 00:07:37,540 saying that the post was submitted. 117 00:07:37,570 --> 00:07:40,410 So are the factor so far as in a pretty good spot. 118 00:07:40,850 --> 00:07:43,980 Let's do some refactoring around our validate function. 119 00:07:44,060 --> 00:07:47,190 Again this is another place where we've got a lot of duplicate logic. 120 00:07:47,500 --> 00:07:51,900 We're checking each of our fields and all we're doing here is saying hey is there any content in here 121 00:07:51,900 --> 00:07:51,920 . 122 00:07:51,940 --> 00:07:54,850 If there's not let's out an error message. 123 00:07:55,510 --> 00:08:00,620 So there's another easy factor we can do here using our fields configuration object. 124 00:08:00,680 --> 00:08:04,260 I'm going to remove all these statements right now since they're pretty ugly. 125 00:08:04,610 --> 00:08:14,250 And instead I'm going to iterate over my list of fields and for each type in field in there. 126 00:08:14,870 --> 00:08:22,080 So type is the configuration object and field is going to be the actual field name itself. 127 00:08:22,100 --> 00:08:33,610 So like the titles categories and post Snel say if there is not a value provided and so this is looking 128 00:08:33,620 --> 00:08:38,170 at the values that were passed into the validate function for each field. 129 00:08:38,620 --> 00:08:43,870 If there is not a value then add on to the heirs object. 130 00:08:44,410 --> 00:08:49,820 Enter a field like so. 131 00:08:50,570 --> 00:08:50,870 OK. 132 00:08:50,870 --> 00:08:53,210 So let's now test this out in the browser as well. 133 00:08:53,280 --> 00:09:00,910 And flip back over looks like OK I typed something in and then when I click out yet still getting my 134 00:09:01,610 --> 00:09:03,380 validation messages in here as well. 135 00:09:03,400 --> 00:09:08,850 So the validate function is working as well but I don't have to do kind of a separate statement for 136 00:09:08,860 --> 00:09:08,920 it. 137 00:09:08,950 --> 00:09:14,600 Every single last deal that I've got in my applications is dramatically condensed logic. 138 00:09:14,600 --> 00:09:20,300 You can definitely imagine if I had like say 20 different fields putting down a statement for each of 139 00:09:20,300 --> 00:09:23,430 them would very quickly get pretty maddening. 140 00:09:24,230 --> 00:09:29,510 So now let's do the last three factor we need to break up this gigantic render method that we've got 141 00:09:29,500 --> 00:09:29,950 in here. 142 00:09:29,950 --> 00:09:35,650 So we've got a render method with the very repetitive div construct and each of these. 143 00:09:35,680 --> 00:09:39,430 So we got the three days and they're all pretty darn similar. 144 00:09:40,640 --> 00:09:43,100 So let's break out a separate helper method. 145 00:09:43,130 --> 00:09:50,360 I'm going to call render field the purpose of render field is to take a field configuration object which 146 00:09:50,450 --> 00:10:00,920 is the label and its type the name of the field and then we want to return from here an actual rendered 147 00:10:01,640 --> 00:10:02,240 field. 148 00:10:02,240 --> 00:10:05,260 So basically an entire div like we have right here. 149 00:10:05,300 --> 00:10:12,230 So this div should contain a label the appropriate type of field control and something to show the validation 150 00:10:12,230 --> 00:10:14,510 message if one exists. 151 00:10:14,510 --> 00:10:16,540 So let's give this a shot as well. 152 00:10:16,610 --> 00:10:23,220 The first thing I'm going to do is pull off my field helper from redux form. 153 00:10:23,420 --> 00:10:29,240 So this field helper right here is the object provided by redux Florham I get one field helper for each 154 00:10:29,240 --> 00:10:33,200 field that I declare down in the redux form configuration helper. 155 00:10:33,800 --> 00:10:37,440 And now I'm going to take one of my here. 156 00:10:37,440 --> 00:10:45,030 This is going to cut the whole thing and cut it I'm going to put it right in here and now one at a time 157 00:10:45,040 --> 00:10:45,080 . 158 00:10:45,110 --> 00:10:51,170 I need to change out all the properties making use of the field config the fields title and the field 159 00:10:51,170 --> 00:10:52,000 helper. 160 00:10:52,340 --> 00:10:58,460 So the first thing I can do is instead of all the different references directly to title all these references 161 00:10:58,460 --> 00:11:02,930 to title should now be a reference to the field helper itself. 162 00:11:02,930 --> 00:11:10,800 So I'll say field helper field helper field helper. 163 00:11:11,820 --> 00:11:15,210 Oh you definitely get the idea. 164 00:11:15,680 --> 00:11:22,120 Next I need to replace the label here with the actual label for the element that I want to use. 165 00:11:22,130 --> 00:11:30,560 So rather than using a label of title I'm going to say look at my field config object which again is 166 00:11:30,740 --> 00:11:33,030 this object right here. 167 00:11:33,080 --> 00:11:35,800 So I just have to take field config dot label. 168 00:11:35,960 --> 00:11:37,080 There we go. 169 00:11:37,130 --> 00:11:37,420 All right. 170 00:11:37,430 --> 00:11:41,800 Now the last step in this one is a little bit more challenging rather than showing an input. 171 00:11:41,810 --> 00:11:48,200 I want to show whatever is being returned or whatever is marked as the type of a very particular field 172 00:11:48,220 --> 00:11:49,030 . 173 00:11:49,850 --> 00:11:54,910 So instead of my input I need to add and field config type like so. 174 00:11:55,220 --> 00:11:59,580 So in the case of the title and categories this is going to come back as an input in the. 175 00:11:59,630 --> 00:12:02,800 In the case of the content it's going to come back as a text area. 176 00:12:02,810 --> 00:12:07,850 So definitely good to expect to have the correct form control show up in this tag right here. 177 00:12:08,060 --> 00:12:12,490 So that's the last thing I need to do is remove these other two divs in here 178 00:12:15,430 --> 00:12:24,600 and instead of going to call or map over I should say my fields objects and for each configuration object 179 00:12:24,600 --> 00:12:27,850 to my fields object and say Rentner field. 180 00:12:28,100 --> 00:12:33,560 And I don't mean to bind this because I'm making reference to prop's inside of the helper right here 181 00:12:33,580 --> 00:12:33,690 . 182 00:12:33,770 --> 00:12:35,660 This stuff prop's fields. 183 00:12:36,350 --> 00:12:36,620 OK. 184 00:12:36,620 --> 00:12:38,240 So I think that's it. 185 00:12:38,240 --> 00:12:42,320 One last quick thing I think we probably don't need to break out all the field helpers here anymore 186 00:12:42,330 --> 00:12:42,360 . 187 00:12:42,380 --> 00:12:44,550 So going to take that out as well. 188 00:12:44,810 --> 00:12:46,370 We've got create a new post. 189 00:12:46,370 --> 00:12:48,960 We map over our fields configuration objects. 190 00:12:49,220 --> 00:12:52,630 We've still got our summit and cancel buttons on here as well. 191 00:12:52,670 --> 00:12:58,970 And then finally inside of my render fields or my method to just render a single field I can show my 192 00:12:58,970 --> 00:13:01,440 label we've got our field helpers OK. 193 00:13:01,490 --> 00:13:02,880 Is looking pretty reasonable. 194 00:13:03,080 --> 00:13:04,030 Let's look back over. 195 00:13:04,040 --> 00:13:06,770 I'm going to refresh the page. 196 00:13:06,770 --> 00:13:12,100 I did have weren't warning message here about the fact that I'm rendering a list of components. 197 00:13:12,170 --> 00:13:16,960 We can easily go back and out and a key property if you wanted to just to get this wind to go away. 198 00:13:16,970 --> 00:13:22,940 But for now it's totally fine to have Ziel notice first off that all my labels are never the same as 199 00:13:22,940 --> 00:13:25,300 the labels in my field configuration object. 200 00:13:25,550 --> 00:13:27,090 And let's try to smit right away. 201 00:13:27,110 --> 00:13:39,890 Looks like I still got my validation message put in post-Idol new post and some post contents call. 202 00:13:39,920 --> 00:13:41,920 And so everything still works. 203 00:13:42,290 --> 00:13:48,110 So this has been a great example of how we can take a single component and pull out some configuration 204 00:13:48,110 --> 00:13:48,720 . 205 00:13:48,830 --> 00:13:53,960 The real rule of thumb here or what the kind of big jump or leap in faith that would say is figuring 206 00:13:53,960 --> 00:13:57,230 out what properties you want to have for each different field. 207 00:13:57,410 --> 00:14:00,970 In my case I decided that having a type and label was appropriate. 208 00:14:01,280 --> 00:14:06,570 One way that you can also approach this is to put on a custom validation function here as well. 209 00:14:06,590 --> 00:14:11,930 So if I wanted to perhaps I could add a custom validation function in here and then when it came time 210 00:14:11,930 --> 00:14:16,620 to validate each particular field I could put in I could adjust my. 211 00:14:16,640 --> 00:14:20,400 Each object here to make sure that it also run that validation function. 212 00:14:20,570 --> 00:14:24,490 So I would also be a great refactor to do as well. 213 00:14:26,060 --> 00:14:29,410 If you've enjoyed this video I highly recommend checking out on Twitter. 214 00:14:29,450 --> 00:14:33,540 Also follow like subscribe all that fantastic stuff on YouTube. 215 00:14:33,860 --> 00:14:35,670 Always check out reli coding dot com. 216 00:14:35,690 --> 00:14:40,060 Once a week always finding new post on the react and redux ecosystem. 217 00:14:40,130 --> 00:14:42,370 Hope you enjoy this and I'll catch you next week.