Create a Redux Form with Syncfusion React Components
Tags: react, webdev, redux, forms
Published: 2023-02-08 13:55:06

---
title: Create a Redux Form with Syncfusion React Components
published: true
date: 2023-02-08 11:00:00 UTC
tags: react, webdev, redux, forms
canonical_url: https://www.syncfusion.com/blogs/post/create-redux-form-with-syncfusion-react-components.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rw5yiknedkcqrsau0cu1.png
---
In this blog, we will see how to create and validate a simple login form using Redux Form and Syncfusion React UI components.

[Redux Form](https://redux-form.com/8.3.0/ "Redux Form") is used to store and manage the form state in React applications. It is a validation library that can easily be integrated into any React web app. It uses the Redux library to store field input values and higher-order components.

The [Syncfusion React UI components](https://www.syncfusion.com/react-components "Syncfusion React UI Components Library") library is the only suite you will ever need to build an application since it contains over 80 high-performance, lightweight, modular, and responsive UI components in a single package.

## Prerequisites

Refer to the [system requirements to build a React application](https://ej2.syncfusion.com/react/documentation/system-requirement/ "System Requirements for React Components").

## Create a Redux Form

Follow these steps to create a simple login form with React Redux Form:

1. First, [create a React 17 application](https://reactjs.org/docs/create-a-new-react-app.html "Create a new React app documentation") (React 17 depends on redux-form) with [Redux Form](https://redux-form.com/7.0.1/docs/gettingstarted.md/ "Getting Started with Redux-Form").
2. Execute the following command to install the Redux dependency package.
```
npm install --save redux react-redux redux-form
```
In this command:
  - [Redux](https://redux.js.org/introduction/getting-started "Getting Started with Redux") is a state container that stores the data.
  - [React Redux](https://react-redux.js.org/introduction/getting-started "Getting Started with React Redux") allows users to read and update the data from the store to the React components.
  - [Redux Form](https://redux-form.com/7.0.1/docs/gettingstarted.md/ "Getting Started with Redux-Form") is used to manage the form state in React.
3.Now, create an empty form with a new **LoginForm.js** file. Refer to the following code example.
```js
import { reduxForm } from "redux-form";
 
let LoginForm = (props) => {
    return (
        <form />
    );
};
```
4.Then, add this new form component to the existing React app using the following code.
```js
import './App.css';
import LoginForm from "./LoginForm";
 
function App() {
  return (
    <div className="App">
      <div className="login-form">
        <h2>Redux form</h2>
        { /* Call the login form */ }
        <LoginForm />
      </div>
    </div>
  );
}
export default App;
```

## Create a Redux store

We have created a simple form and integrated it with the React app. Now, we’ll add a store in the **index.js** file to store the form state using the **Provider** component. This makes the Redux store available to the child components.

Refer to the following code example.

```js
import { Provider } from 'react-redux';
import { createStore, combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
 
// Update the form state to the Redux store based on Redux actions.
const appReducer = combineReducers({ form: formReducer });
// Create the store to store the states.
const store = createStore(appReducer);
// Makes the Redux store available for child components.
ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
```

## Connect the form with Redux Form

Next, we add the following code to the **LoginForm.js** file to connect the Redux Form with the created login form.

```js
// Connect the form with redux-form to communicate with the store.
export default LoginForm = reduxForm({
    // A unique name for the form.
    form: "login"
})(LoginForm);
```

## Add Syncfusion React UI components

For the login form, we will use Syncfusion React UI components:

- [TextBox](https://npmci.syncfusion.com/development/react/documentation/textbox/getting-started/ "Getting Started with React TextBox Component"): To get the user’s email ID and password.
- [DatePicker](https://npmci.syncfusion.com/development/react/documentation/datepicker/getting-started/ "Getting Started with React DatePicker Component"): To get the user’s date of birth.
- [Button](https://npmci.syncfusion.com/development/react/documentation/button/getting-started/ "Getting Started with React Button Component"): To submit the form.

So, first, install their dependencies. Then, add the Syncfusion components in the login form using the **Field** component. The Field component connects the inputs provided in the Syncfusion React components to the store.

Refer to the following code example.

```js
import { reduxForm, Field } from "redux-form";
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import { TextBoxComponent } from "@syncfusion/ej2-react-inputs";
import { ButtonComponent } from "@syncfusion/ej2-react-buttons";
 
const textBox = ({ placeholder }) => {
    // Used the Syncfusion TextBox component for receiving the user input.
    return <TextBoxComponent placeholder={placeholder} floatLabelType="Auto" />
};
const datePicker = ({ placeholder }) => {
    // Used the Syncfusion DatePicker component for receiving the user's date of birth.
    return <DatePickerComponent placeholder={placeholder} floatLabelType="Auto" />
};
let LoginForm = () => {
    return (
        <form>
            { /* Field is used to connect the inputs to store */ }
            { /* Use the Syncfusion TextBox component to receive the user name input */ }
            <Field name="username" component={textBox} placeholder="Enter the user name" />
            { /* Use the Syncfusion TextBox component to receive the user password input */ }
            <Field name="password" component={textBox} placeholder="Enter the password" />
            { /* Use the Syncfusion DatePicker component to receive the user date of birth input */ }
            <Field name="dob" component={datePicker} placeholder="Enter the date of birth" />
            { /* Use the Syncfusion Button component to submit the values */ }
            <ButtonComponent type="submit">Submit</ButtonComponent>
        </form>
    );
};
 
// Connect the form with Redux Form to communicate with the store.
export default LoginForm = reduxForm({
    // A unique name for the form.
    form: "login"
})(LoginForm);
```

The value of the **Field** is maintained by redux. Use the handler function to get the value of the form fields while submitting the form. Refer to the following code example.

```js
// App.js file.
function App() {
  const handleLogin = values => {
    // Display the form data to console.
    console.log(`User name: ${values.username}`);
    console.log(`Password: ${values.password}`);
    console.log(`DOB: ${values.dob}`);
  }
  return (
    <div className="App">
      <div className="login-form">
        <h2>Redux form</h2>
        <LoginForm onSubmit={handleLogin} />
      </div>
    </div>
  );
}
export default App;
 
// LoginForm.js file.
let LoginForm = (props) => {
    // Get the form data from props.
    const { handleSubmit } = props;
    return (
        <form onSubmit={handleSubmit}>
            …
        </form>
    );
};
```

## Validate the form

Redux Form has built-in support for form validation. Use the **validate** function to check for validation errors in the form. Form inputs will be validated while submitting the form.

The submit handler function will not be called if the form inputs have no values. Refer to the following code example.

```js
// Add the required form input validation.
const validate = values => {
    // Add the error message while if validation fails.
    const errors = {};
    if (!values.username) {
        errors.username = 'Required';
    }
    if (!values.password) {
        errors.password = 'Required';
    }
    if (!values.dob) {
        errors.dob = 'Required';
    }
    return errors;
}
// Connect the form with Redux Form to communicate with the store.
export default LoginForm = reduxForm({
    // A unique name for the form.
    form: "login",
    // Add the validate function to validate the form.
    validate
})(LoginForm);
```

## Errors validation

The system will validate the inputs and display the errors under the inputs upon form submission. Refer to the following code example.

```js
const textBox = ({ placeholder, input, meta: { touched, error } }) => {
    // Use the Syncfusion TextBox component to receive the user input.
    return <div>
        <TextBoxComponent placeholder={placeholder} floatLabelType="Auto" {...input}
            onChange={(e) => {
                input.onChange(e.target.value);
            }}
        />
        { /* Display the error message if it occurred */ }
        {touched && error && <span className="error">{error}</span>}
    </div>
};
const datePicker = ({ placeholder, input, meta: { touched, error } }) => {
    // Use the Syncfusion DatePicker component to receive the user's date of birth.
    return <div>
      <DatePickerComponent placeholder={placeholder} floatLabelType="Auto" {...input}
         onChange={(e) => {
            input.onChange(e.target.value);
         }}
      />
      { /* Display the error message if it occurred */ }
      {touched && error && <span className="error">{error}</span>}</div>
};
```

Then run the application using the following command.

```
npm start
```

Refer to the following output image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Login-Form-Created-Using-Redux-Form-and-Syncfusion-React-Components.png" alt="Login Form Created Using Redux Form and Syncfusion React Components" style="width:100%">

  <figcaption>Login Form Created Using Redux Form and Syncfusion React Components</figcaption>

</figure>

## GitHub reference

Check out the [Creating a Redux Form with Syncfusion React Components demo on GitHub](https://github.com/SyncfusionExamples/Creating-a-Redux-Form-with-Syncfusion-components-in-React "Creating a Redux-Form with Syncfusion React components GitHub demo").

## Conclusion

Thanks for reading! In this blog, we have seen how to create and validate a login form using Redux Form and [Syncfusion React UI components](https://www.syncfusion.com/react-components "Syncfusion React UI components"). Try it out and leave your feedback in the comments section.

The new version of Essential Studio is available for existing customers from the [License and Downloads](https://www.syncfusion.com/account/downloads "License and download page of Essential Studio") page. If you are not a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Syncfusion Essential Studio") to check out our available features.

For questions, you can contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com "Syncfusion Support Portal"), and [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [How to Integrate the Syncfusion React Mention Component with Rich Text Editor](https://www.syncfusion.com/blogs/post/integrate-react-mention-component-with-rich-text-editor.aspx "Blog: How to Integrate the Syncfusion React Mention Component with Rich Text Editor")
- [Create a Simple Dashboard for Data Analysis in React](https://www.syncfusion.com/blogs/post/create-a-simple-dashboard-for-data-analysis-in-react.aspx "Blog: Create a Simple Dashboard for Data Analysis in React")
- [How to Use Syncfusion’s React Rich Text Editor with React Redux Form](https://www.syncfusion.com/blogs/post/how-to-use-syncfusions-react-rich-text-editor-with-react-redux-form.aspx "Blog: How to Use Syncfusion's React Rich Text Editor with React Redux Form")
- [Recoil: The Future of State Management for React?](https://www.syncfusion.com/blogs/post/recoil-the-future-of-state-management-for-react.aspx "Blog: Recoil: The Future of State Management for React?")