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