Redux Form is a library for managing form state in Redux applications. It provides a straightforward way to connect your form inputs to the Redux store, allowing for powerful form state management and validation. This tutorial will guide you through the basics of setting up and using Redux Form in a React and Redux application.

Step 1: Setup Your React and Redux Project

If you don’t already have a React project, you can create one using Create React App:

npx create-react-app my-redux-form-app
cd my-redux-form-app

Then, install Redux and Redux Form:

npm install redux react-redux redux-form
# or
yarn add redux react-redux redux-form

Step 2: Setup Redux

1. Create Redux Store:

Create a file src/store.js and set up your Redux store:

import { createStore, combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';

const rootReducer = combineReducers({
  form: formReducer,
});

const store = createStore(rootReducer);

export default store;

2. Provide Redux Store to Your App:

Wrap your application with the Provider from react-redux in src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Step 3: Create a Basic Form

1. Create a Form Component:

Create a file src/MyForm.js and define your form component using Redux Form:

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

const MyForm = (props) => {
  const { handleSubmit } = props;

  const submit = (values) => {
    console.log(values);
  };

  return (
    <form onSubmit={handleSubmit(submit)}>
      <div>
        <label htmlFor="name">Name</label>
        <Field name="name" component="input" type="text" />
      </div>
      <div>
        <label htmlFor="email">Email</label>
        <Field name="email" component="input" type="email" />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

export default reduxForm({
  form: 'myForm',
})(MyForm);

2. Use the Form Component in Your App:

Import and use the form component in src/App.js:

import React from 'react';
import MyForm from './MyForm';

const App = () => (
  <div>
    <h1>Redux Form Example</h1>
    <MyForm />
  </div>
);

export default App;

Step 4: Adding Validation

1. Define Validation Functions:

You can define validation functions and pass them to the reduxForm decorator:

const validate = (values) => {
  const errors = {};
  if (!values.name) {
    errors.name = 'Required';
  }
  if (!values.email) {
    errors.email = 'Required';
  } else if (!/\S+@\S+\.\S+/.test(values.email)) {
    errors.email = 'Invalid email address';
  }
  return errors;
};

2. Apply Validation to the Form:

Update the form component to use the validation functions:

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

const MyForm = (props) => {
  const { handleSubmit } = props;

  const submit = (values) => {
    console.log(values);
  };

  return (
    <form onSubmit={handleSubmit(submit)}>
      <div>
        <label htmlFor="name">Name</label>
        <Field name="name" component="input" type="text" />
        {props.errors.name && <span>{props.errors.name}</span>}
      </div>
      <div>
        <label htmlFor="email">Email</label>
        <Field name="email" component="input" type="email" />
        {props.errors.email && <span>{props.errors.email}</span>}
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

const validate = (values) => {
  const errors = {};
  if (!values.name) {
    errors.name = 'Required';
  }
  if (!values.email) {
    errors.email = 'Required';
  } else if (!/\S+@\S+\.\S+/.test(values.email)) {
    errors.email = 'Invalid email address';
  }
  return errors;
};

export default reduxForm({
  form: 'myForm',
  validate,
})(MyForm);

Step 5: Custom Field Components

You can create custom field components to encapsulate field rendering logic.

1. Custom Input Component:

Create a custom input component to handle rendering and validation errors:

const renderField = ({
  input,
  label,
  type,
  meta: { touched, error, warning }
}) => (
  <div>
    <label>{label}</label>
    <div>
      <input {...input} placeholder={label} type={type} />
      {touched &&
        ((error && <span>{error}</span>) ||
          (warning && <span>{warning}</span>))}
    </div>
  </div>
);

2. Using the Custom Input Component:

Update the form to use the custom input component:

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

const renderField = ({
  input,
  label,
  type,
  meta: { touched, error, warning }
}) => (
  <div>
    <label>{label}</label>
    <div>
      <input {...input} placeholder={label} type={type} />
      {touched &&
        ((error && <span>{error}</span>) ||
          (warning && <span>{warning}</span>))}
    </div>
  </div>
);

const MyForm = (props) => {
  const { handleSubmit } = props;

  const submit = (values) => {
    console.log(values);
  };

  return (
    <form onSubmit={handleSubmit(submit)}>
      <Field name="name" type="text" component={renderField} label="Name" />
      <Field name="email" type="email" component={renderField} label="Email" />
      <button type="submit">Submit</button>
    </form>
  );
};

const validate = (values) => {
  const errors = {};
  if (!values.name) {
    errors.name = 'Required';
  }
  if (!values.email) {
    errors.email = 'Required';
  } else if (!/\S+@\S+\.\S+/.test(values.email)) {
    errors.email = 'Invalid email address';
  }
  return errors;
};

export default reduxForm({
  form: 'myForm',
  validate,
})(MyForm);

Conclusion

Redux Form is a powerful library for managing form state in Redux applications. This tutorial covered the basics of setting up and using Redux Form, including creating forms, adding validation, and creating custom field components. For more advanced usage and detailed documentation, refer to the official Redux Form documentation.