Using Redux Form with React for Building Forms

Forms are an essential part of web development, and building them can be a tedious and time-consuming process. However, with the help of Redux Form, a library for managing form state in React, building forms becomes a lot easier and more efficient. In this article, we will explore the basics of using Redux Form with React for building forms.

Prerequisites

Before we begin, make sure you have some basic knowledge of React and Redux. If you are new to React, I recommend going through the official React documentation. If you are new to Redux, I recommend going through the official Redux documentation.

Installing Redux Form

The first step in using Redux Form is to install it in your project. You can install it via npm by running the following command:

npm install --save redux-form

Creating a Simple Form

Let's start by creating a simple form component that will allow users to input their name and email address. We will use Redux Form to manage the form state. Here's the code for the component:

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

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

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

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

export default reduxForm({
  form: 'simpleForm',
})(SimpleForm);

Let's break down the code:

• We import the Field and reduxForm components from Redux Form.
• We create a SimpleForm component that takes in props.
• We define an onSubmit function that will be called when the form is submitted.
• In the return statement, we create a form element and attach the onSubmit function to it.
• We create two input fields for name and email using the Field component.
• We specify the type of each input field using the type prop.
• We create a submit button.
• Finally, we wrap the SimpleForm component in reduxForm and pass in a configuration object with a form key that specifies the name of the form.

Handling Form Submission

Now that we have created a form, let's handle the form submission. In the onSubmit function, we can access the form values using the values parameter. We can then perform any actions we want with these values, such as sending them to a server or updating the Redux store. Here's an example of how we can use the onSubmit function to log the form values to the console:

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

Validating Form Fields

One of the most powerful features of Redux Form is the ability to validate form fields. We can specify validation rules for each field using the validate function, which is passed as a configuration object to reduxForm. Here's an example of how we can add validation to our SimpleForm component:

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: 'simpleForm',
  validate,
})(SimpleForm);

Let's break down the code:

• We create a validate function that takes in values, an object containing the form field values.
• We define an errors object to store any validation errors.
• We check if the name and email fields are empty and add corresponding errors to the errors object if they are.
• We use a regular expression to check if the email address is valid and add an error if it's not.
• We return the errors object.
• Finally, we pass the validate function to reduxForm as a configuration object.

With this validation in place, if a user submits the form without filling in any of the required fields or with an invalid email address, the form will not be submitted and an error message will be displayed.

Accessing Form State

Redux Form stores the form state in the Redux store, which means we can access it just like any other piece of state. We can use the connect function from react-redux to connect a component to the Redux store and access the form state using the formValueSelector function from Redux Form. Here's an example of how we can access the form state in our SimpleForm component:

import { connect } from 'react-redux';
import { formValueSelector } from 'redux-form';

const selector = formValueSelector('simpleForm');

const mapStateToProps = (state) => {
  const name = selector(state, 'name');
  const email = selector(state, 'email');

  return {
    name,
    email,
  };
};

export default connect(mapStateToProps)(reduxForm({
  form: 'simpleForm',
  validate,
})(SimpleForm));

Let's break down the code:

• We import the connect function from react-redux and the formValueSelector function from Redux Form.
• We create a selector using the formValueSelector function and pass in the name of the form.
• We create a mapStateToProps function that takes in the Redux state and uses the selector to get the name and email values from the form state.
• We return an object with the name and email values.
• Finally, we wrap the SimpleForm component in reduxForm, connect it to the Redux store using connect, and pass in the mapStateToProps function.

With this setup, we can access the name and email values in our SimpleForm component using the props object.

Conclusion

In this article, we have explored the basics of using Redux Form with React for building forms. We have seen how to install Redux Form, create a simple form component, handle form submission, validate form fields, and access form state. With Redux Form, building forms becomes a lot easier and more efficient, allowing us to focus on building the rest of our application.