This post assumes familiarity with both the Facebook’s React and Redux.
Web applications often have forms, and users have come to expect an increasingly rich feature set to improve their user experience. Implementing a particular feature or set of features for a simple or moderate size form isn’t necessarily time intensive; however, some projects have large, complex forms that can span several to many pages with dynamic user flows. Forms have a lot of state which may be relevant at a given moment:
- Has the user accessed any or all of the form?
- What are the values of the fields?
- Is the form valid?
- If not, what are the errors?
- Which field has which error?
Is the form asynchronous checking a field or submitting?
As complexity grows, it becomes increasingly important to structure an application into recognizable patterns. Facebook’s UI library React and the Redux application state library are only becoming more popular and accepted within the developer community. The Redux-Form library integrates the underlying concepts of React and Redux to organize the development of feature-rich, complex forms.
Out of the box, Redux-Form simplifies implementing an incredibly large set of form features. Form validation can be performed for individual fields or the entire form, on change or submission, and synchronously or asynchronously against one or more remote locations. Validation errors are tracked through state and distributed to the form or their individual field in real-time. This allows for simple error display through the provided UI component. Additionally, state of the form (pristine, valid, invalid, submitted, etc.) and the errors for each field are propagated to their respective components in real-time.
The UI views for the input components are abstracted from the application logic that manages the state of the forms. Views for form fields can be carefully designed to react to the form state and reused throughout a form or the application.
Input values can be formatted for user display (telephone numbers or money for example) or normalized against constraints.
A form can easily be initialized, with a set of values, modified, or reset in response to any event without direct coupling. This can greatly simplify storing partially completed work or transferring data between separate forms.
Each of these features can be seen demonstrated in more elaborate detail in the documentation available at Redux Form. A live tutorial by the creator is available here.
The real value of implementing Redux Form isn’t in any particular feature offered from the library or even the set of features. It is that the set of features is implemented in the design patterns advocated by React and Redux. The organization enforced by the patterns helps ensure readability. Developers new to a project but familiar with React and Redux should have little trouble recognizing and understanding how any of features are implemented reducing onboarding and maintenance costs. Additionally, and more importantly, the structural patterns increase iterability to better adapt to evolving project needs. For example, the abstracted input UI’s can be swapped in and out or modified across many locations with minimal work. Validations can be updated or expanded without much trouble.
There are, of course, reasons not to use Redux Form. The library requires Redux. The granular form actions may pollute or bloat application action logs. This may make it more difficult to perform analytics on them. The project may not have large or complex forms. In that case, you might not need Redux Form in the same way that You Might Not Need Redux. If not utilized, the extra structure may add nothing more than development time to the project.
