Redux-Form: Basic overview and thoughts.

Everyone knows redux is a very tedious state management system to work within general. However, one of the upsides of using it is how easy it is to utilize redux-form. Redux-form is a state management system for forms that utilize React and Redux. Unlike react-redux, it does not require much initial setup and it even requires less setup in terms of forms compared to non-redux applications.

The first thing I noticed about redux-form is that a lot of the typical redux boiler-plate is not needed. React-form comes with the action creators and reducer already set up under the hood. The only step you need to take is implementing it inside your combineReducers() method. What a relief!

The second thing I noticed was how similar the setup up is compared to react-redux. In react-redux, you utilize the connector() method at the bottom of your application’s export default. Redux-form has a similar method in order to give you access to the redux-form methods. Every function you create afterward will contain props with all the redux-form methods. The first key in the reduxForm connector object should always be form and the value is what you want your form’s name to be saved as in your state.

The third the I noticed was the obscurity of the Field Component. The Field Component more so serves as a mediator. You essentially build it the same as a regular input except the Field Component contains a property called component. The component property is where you really build out your input tag by passing it into the Field. It is also important to note that Field has no idea what a label is. What happens under the hood is that it passes those properties into the component property and it attaches itself accordingly. The name property is what you want your state key to be named.

It is a slightly tedious two-step process but it is essential in order for redux-form to work. Building out separate functions to return the JSX allows you to easily manipulate the formProps which quite frankly stores everything you need for your forms. All the information you will ever need is stored in the props given to you from redux-form.

For example onChange and input values:

Or even things for form submittal like handleSubmit() which require a little less code to for intial setup:

The easiest way to find out about the methods is by console logging the props and finding testing them out.