Skip to content
Youngho Chaa cha cha

My Redux Form Note

2 min read

Redux Form is a library that helps you manage form state in Redux. It streamlines the process of syncing form data with the Redux store, handling form submission, and validating inputs. Redux Form has seen a decrease in popularity due to the rise of alternatives like Formik and React Hook Form, but it's still a powerful tool with many legacy projects using it.

Here's a brief introduction to Redux Form and a basic example:

Integration Steps:


npm install redux-form

Setup: In your main reducer file:

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
export default combineReducers({
// ... other reducers
form: formReducer // mounted under "form"

Creating the Form: Redux Form exports a reduxForm() function which is similar to connect() from react-redux. You use it to wrap your form component.

In the code above, Field is a component from Redux Form used to connect each form input to the Redux store. The name prop corresponds to the key in the form state for that particular field.

import React from 'react';
import { Field, reduxForm } from 'redux-form';
let SimpleForm = props => {
const { handleSubmit } = props;
return (
<form onSubmit={handleSubmit}>
<label htmlFor="firstName">First Name</label>
<Field name="firstName" component="input" type="text" />
<button type="submit">Submit</button>
SimpleForm = reduxForm({
form: 'simple' // a unique identifier for this form
export default SimpleForm;

Accessing Form Values: You can access form values in the Redux store under state.form[formName].values, where formName is the unique name you gave to your form (e.g., 'simple' in our example).

Submitting the Form: Redux Form injects a handleSubmit function as a prop which you can use to handle form submission.

const submitForm = values => {
// Do something with values, like dispatching an action
<SimpleForm onSubmit={submitForm} />

Validation: You can easily add validation to your form by passing a validation function to reduxForm():

Now, the error messages can be accessed and displayed in your form component:

<Field name="firstName" component="input" type="text" />
{props.errors.firstName && <span>{props.errors.firstName}</span>}
const validate = values => {
const errors = {};
if (!values.firstName) {
errors.firstName = 'Required';
return errors;
SimpleForm = reduxForm({
form: 'simple',
validate // <--- validation function given to redux-form

These are the basics of Redux Form. The library offers a lot more, like handling array fields, form wizard patterns, asynchronous validation, and more. However, as mentioned earlier, the community has been leaning towards other libraries like Formik and React Hook Form for handling form states, mainly due to their simplicity and reduced boilerplate. It's essential to evaluate the needs of your project before deciding on a library.

© 2024 by Youngho Chaa cha cha. All rights reserved.
Theme by LekoArts