Learn how to write a generic component that holds the redux-form complexity, knows to get just a JSON that describes the fields, and render a matching redux-form. creating a forms was never so easy and clean.
Photo by Toa Heftiba on Unsplash
The problem:
Redux-form is a popular repository to render react forms.
As is it better described in the github repository page:
A Higher Order Component using react-redux to keep form state in a Redux store
If you will dig more in the examples, you will find out that it is really a powerfull tool that can give you a metadata on any field, it’s errors, warning, state (pristine, dirty, touched), field array and more.
But still, redux form has some complexity.
for example, when you want your form to be initialized by values from the state, you should do this:
also, when having many forms components in the application, you need a way to enforce some consistent behaviour for all the forms, for example: submit button is disabled for not valid and pristine forms. this logic must not be duplicated for any form. You need some common component to hold the form generation.
The Solution
write a component, that will get a JSON input of the form fields description and values. and it can generates a form by this input only. this component will use redux-form, but this will be internally, not outside the component.
Advantages:
- consistent behaviour for all forms
- quick form development time
- no redux-form boilerplate
- code reuse
- easy to change form library in the future, change is only in the lower wrapper component. not in all other forms components.
Let’s see some code
Here is an example of a simple sign-up page, that uses the wrapper component which contains redux form
first, create form field description array, that describes what is the name, label and validation function for any field. (you can also define a field type: checkbox, drop-down and more)
implement submit function:
If you did that, most of the work is done. now just render the redux-form wrapper component, which called here GenericReduxForm and pass submit callback, fields, values, form ID which need to be unique across all the app, and a title if you want the form to show some nice header.
And you set up a form, only by JSON data, a super powerfull form, contains validation, submit button, and redux-state inside.
Here is how GenericReduxForm looks like:
render function:
Now, more deeper, render field function, using redux-form component Field , which can get a custom component to render, in my case GenericFormField
The field rendering itself (GenericFormField):
when submit button is disabled?
and, here, the most complex stuff: define redux-form props.
create redux-form, and connect it to the store
now, the goal achived, forms can be done quickly, implementation agnostic, the form library can be changed, under the hood, but all components around can continue live without any mutation, and the most powerfull benefit is that creating form is really so easy and clean. just json, values and that it.
More to be come:
- FieldArray
- creating a library in github and deploy this to NPM