Integration of React Components with Redux Form

This guide demonstrates how to integrate Syncfusion^® React components in Redux Form, covering project setup, store configuration, form implementation, validation, and running the application.

What is Redux Form?

Redux Form is a popular library used in React projects for managing and handling form state. It integrates seamlessly with the Redux state management library (Redux Store) and provides an efficient way to manage form inputs, validation, submission, and data synchronization with the Redux store.

Set up the React project

1. Create a new React project using Vite.

2. Install the necessary Redux dependencies by running the following command:

npm install --save @reduxjs/toolkit react-redux redux-form

npm install --save @reduxjs/toolkit react-redux redux-form

The redux-form package is not officially supported in React 19. It is recommended to use React 18 for compatibility. If you want to use React 19, you may encounter dependency issues. To resolve this, install the packages with the --legacy-peer-deps flag.

Create a Redux Form

1. Create a new file named LoginForm.tsx and implement the login form using Redux Form:

import { reduxForm } from "redux-form";

interface LoginFormsProps {
    handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
}

const LoginForms = (props: LoginFormsProps) => {
    return (
        <form />
    );
};

import { reduxForm } from "redux-form";

interface LoginFormsProps {
    handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
}

const LoginForms = (props: LoginFormsProps) => {
    return (
        <form />
    );
};

2. Include the form component and its associated styles in your React project by adding the following code to the App.tsx and App.css files:

import './App.css';
import { LoginForm } from "./LoginForm";
 
export default function App() {
  return (
    <div className="App">
      <div className="login-form">
        <h2>Redux form</h2>
        <LoginForm />
      </div>
    </div>
  );
}

import './App.css';
import { LoginForm } from "./LoginForm";
 
export default function App() {
  return (
    <div className="App">
      <div className="login-form">
        <h2>Redux form</h2>
        <LoginForm />
      </div>
    </div>
  );
}

Setting up the Redux store

After creating the form and integrating it into the React project, set up the Redux store in the main.tsx file. Use the Provider component to make the Redux store available to all child components in the application. This enables the form state and other application state to be managed globally through Redux.

import { Provider } from 'react-redux'
import { configureStore } from '@reduxjs/toolkit'
import { reducer as formReducer } from 'redux-form'
 
const store = configureStore({
  reducer: {
    form: formReducer
  }
});

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </StrictMode>,
)

import { Provider } from 'react-redux'
import { configureStore } from '@reduxjs/toolkit'
import { reducer as formReducer } from 'redux-form'
 
const store = configureStore({
  reducer: {
    form: formReducer
  }
});

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </StrictMode>,
)

Connecting the form to Redux

In the LoginForm.tsx file, connect the form component with Redux Form by exporting it using the reduxForm higher-order component:

export const LoginForm = reduxForm({
    form: "login"
})(LoginForms);

export const LoginForm = reduxForm({
    form: "login"
})(LoginForms);

Adding Syncfusion^® React components

To add Syncfusion^® React components Button and TextBox into the login form, follow these steps:

1. Install the required Syncfusion® packages

npm install @syncfusion/react-inputs @syncfusion/react-buttons --save

npm install @syncfusion/react-inputs @syncfusion/react-buttons --save

2. Import the required CSS files for the Button and TextBox components into the src/App.css file.

@import '../node_modules/@syncfusion/react-base/styles/material.css';
@import '../node_modules/@syncfusion/react-inputs/styles/material.css';
@import '../node_modules/@syncfusion/react-buttons/styles/material.css';

@import '../node_modules/@syncfusion/react-base/styles/material.css';
@import '../node_modules/@syncfusion/react-inputs/styles/material.css';
@import '../node_modules/@syncfusion/react-buttons/styles/material.css';

3. Integrate the React components into the login form by using the Field component provided by Redux Form.

import { reduxForm, Field } from "redux-form";
import { TextBox, type TextBoxChangeEvent } from "@syncfusion/react-inputs";
import { Button } from "@syncfusion/react-buttons";

interface TextBoxComponentProps {
  placeholder: string;
  labelMode: string;
  input: {
    name: string;
    value: string;
    onChange: (event: TextBoxChangeEvent) => void;
  };
  meta: {
    touched: boolean;
    error?: string;
  };
}
 
const textBox: React.FC<TextBoxComponentProps> = ({ placeholder }) => {
    return <TextBox placeholder={placeholder} labelMode="Auto" />
};

const LoginForms = (props: LoginFormsProps) => {
    return (
        <form>
            <Field name="username" component={textBox} placeholder="Enter the user name" />
            <Field name="password" component={textBox} placeholder="Enter the password" />
            <Button type="submit">Submit</Button>
        </form>
    );
};
 
export const LoginForm = reduxForm({
    form: "login"
})(LoginForms);

import { reduxForm, Field } from "redux-form";
import { TextBox, type TextBoxChangeEvent } from "@syncfusion/react-inputs";
import { Button } from "@syncfusion/react-buttons";

interface TextBoxComponentProps {
  placeholder: string;
  labelMode: string;
  input: {
    name: string;
    value: string;
    onChange: (event: TextBoxChangeEvent) => void;
  };
  meta: {
    touched: boolean;
    error?: string;
  };
}
 
const textBox: React.FC<TextBoxComponentProps> = ({ placeholder }) => {
    return <TextBox placeholder={placeholder} labelMode="Auto" />
};

const LoginForms = (props: LoginFormsProps) => {
    return (
        <form>
            <Field name="username" component={textBox} placeholder="Enter the user name" />
            <Field name="password" component={textBox} placeholder="Enter the password" />
            <Button type="submit">Submit</Button>
        </form>
    );
};
 
export const LoginForm = reduxForm({
    form: "login"
})(LoginForms);

4. Define a handler function for form submission and data display in the App.tsx and LoginForm.tsx files:

interface LoginFormValues {
  username: string;
  password: string;
}

export default function App() {
  const handleLogin = (values: LoginFormValues) => {
    alert(`User name: ${values.username}\nPassword: ${values.password}`);
  }
  return (
    <div className="App">
      <div className="login-form">
        <h2>Redux form</h2>
        <LoginForm onSubmit={handleLogin} />
      </div>
    </div>
  );
}

interface LoginFormValues {
  username: string;
  password: string;
}

export default function App() {
  const handleLogin = (values: LoginFormValues) => {
    alert(`User name: ${values.username}\nPassword: ${values.password}`);
  }
  return (
    <div className="App">
      <div className="login-form">
        <h2>Redux form</h2>
        <LoginForm onSubmit={handleLogin} />
      </div>
    </div>
  );
}

Form validation

Redux Form provides built-in support for validation. Implement a validate function to check form values and display error messages when needed. Validation occurs automatically on submission.

interface LoginFormValues {
  username: string;
  password: string;
}
const validate = (values: LoginFormValues) => {
    const errors: Partial<LoginFormValues> = {};
    if (!values.username) {
        errors.username = 'Required';
    }
    if (!values.password) {
        errors.password = 'Required';
    }
    return errors;
}

export const LoginForm = reduxForm({
    form: "login",
    validate
})(LoginForms);

interface LoginFormValues {
  username: string;
  password: string;
}
const validate = (values: LoginFormValues) => {
    const errors: Partial<LoginFormValues> = {};
    if (!values.username) {
        errors.username = 'Required';
    }
    if (!values.password) {
        errors.password = 'Required';
    }
    return errors;
}

export const LoginForm = reduxForm({
    form: "login",
    validate
})(LoginForms);

Displaying validation errors

Upon form submission, the inputs will be validated and corresponding error messages will be displayed below the respective input fields.

const textBox: React.FC<TextBoxComponentProps> = ({ placeholder, input, meta: { touched, error } }) => {
    return <div>
        <TextBox placeholder={placeholder} labelMode="Auto" {...input}
           onChange={(e: TextBoxChangeEvent) => input.onChange(e.value as TextBoxChangeEvent)}
        />
        {touched && error && <span className="error">{error}</span>}
    </div>
};

const textBox: React.FC<TextBoxComponentProps> = ({ placeholder, input, meta: { touched, error } }) => {
    return <div>
        <TextBox placeholder={placeholder} labelMode="Auto" {...input}
           onChange={(e: TextBoxChangeEvent) => input.onChange(e.value as TextBoxChangeEvent)}
        />
        {touched && error && <span className="error">{error}</span>}
    </div>
};

Run the project

Execute the following command to run the project:

npm run dev

npm run dev

The output will appear as follows: