redux-form

What is redux-form?

redux-form is a library that allows you to manage form state in Redux. It provides a way to keep form state in a Redux store, making it easier to manage complex forms and their validation, submission, and other behaviors.

What are redux-form's main functionalities?

Form Creation

This code demonstrates how to create a simple form using redux-form. The `Field` component is used to define form fields, and the `reduxForm` higher-order component is used to connect the form to Redux.

import React from 'react';
import { Field, reduxForm } from 'redux-form';

let SimpleForm = props => {
  const { handleSubmit } = props;
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="firstName">First Name</label>
        <Field name="firstName" component="input" type="text" />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

SimpleForm = reduxForm({
  form: 'simple'
})(SimpleForm);

export default SimpleForm;

Form Validation

This code demonstrates how to add validation to a form using redux-form. The `validate` function checks for errors and returns an object with error messages, which are then used by redux-form to display validation errors.

import React from 'react';
import { Field, reduxForm } from 'redux-form';

const validate = values => {
  const errors = {};
  if (!values.firstName) {
    errors.firstName = 'Required';
  }
  return errors;
};

let ValidatedForm = props => {
  const { handleSubmit } = props;
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="firstName">First Name</label>
        <Field name="firstName" component="input" type="text" />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

ValidatedForm = reduxForm({
  form: 'validated',
  validate
})(ValidatedForm);

export default ValidatedForm;

Form Submission

This code demonstrates how to handle form submission using redux-form. The `handleSubmit` function is passed a `submit` function that processes the form data.

import React from 'react';
import { Field, reduxForm } from 'redux-form';

const submit = values => {
  console.log('Form data:', values);
};

let SubmitForm = props => {
  const { handleSubmit } = props;
  return (
    <form onSubmit={handleSubmit(submit)}>
      <div>
        <label htmlFor="firstName">First Name</label>
        <Field name="firstName" component="input" type="text" />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

SubmitForm = reduxForm({
  form: 'submit'
})(SubmitForm);

export default SubmitForm;

Other packages similar to redux-form

formik

Formik is a popular form library for React that provides a simpler API compared to redux-form. It focuses on reducing boilerplate and improving performance by not relying on Redux for form state management. Formik is often preferred for its ease of use and flexibility.

react-hook-form

React Hook Form is a library that uses React hooks to manage form state and validation. It is known for its minimal re-renders and high performance. Unlike redux-form, it does not require Redux and is often chosen for its simplicity and performance benefits.

final-form

Final Form is a framework-agnostic form state management library that can be used with React through the react-final-form package. It offers similar functionality to redux-form but is designed to be more lightweight and flexible, without the need for Redux.

README

redux-form

---

redux-form works with React Redux to enable an html form in React to use Redux to store all of its state.

Installation

npm install --save redux-form

Documentation

• Getting Started
• Examples
• API
• FAQ
• Release Notes
• Older Documentation

Videos

• Abstracting Form State with Redux Form at JS Channel - Bengaluru 2016