In this project, we're going to use redux-form (https://redux-form.com/) to build the forms. Redux form is a popular way to manage form state in Redux. It is easy to use, provides immutable JS support, and optimizes and solves most of the use cases ranging from simple, multi-step forms, to more complex. Some of the nifty examples of how we can integrate Redux form can be found here: https://redux-form.com/8.1.0/examples/.

There are five steps involved in using redux-form in our application, which are as follows:

1. Install the package, as follows:

yarn add redux-form --exac

2. Initiate the form reducer in the root reducer. So, in app/reducers.js, we add form reducer, as follows:

import { reducer as formReducer } from 'redux-form/immutable'; 
export default function createReducer(injectedReducers = {}) {
 const rootReducer = combineReducers({
   form: formReducer,
   ...injectedReducers,
 });

 const mergeWithRouterState = connectRouter(history);
 return mergeWithRouterState(rootReducer);
}

3. Make the Form component, as follows:

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

let LoginForm = props => {
 const { handleSubmit } = props
 return <form onSubmit={handleSubmit}>{/* form body*/}</form>
}

LoginForm = reduxForm({
 // a unique name for the form
 form: 'login'
})(LoginForm)

export default LoginForm;

4. Create form contents using the <Field/> component. The <Field/> component from redux-form helps to connect each input to the Redux store, as follows:

<Field
   name="email"
   hasFeedback
   component={renderInput}
   disabled={submitting}
   label=”Email”
 />

<Field> is a very powerful component, which can take a class or a stateless component. You can read about its two types of usage at https://redux-form.com/8.1.0/docs/api/field.md/#usage. We're going to use the stateless component as it provides better ways to validate, and gives more control over how input can be rendered. We can create a stateless renderInput component, similar to the one given as follows:

import React from 'react';
import PropTypes from 'prop-types';
import { Form, Input } from 'antd';

const renderInput = props => {
 const { input, meta, hasFeedback, label, ...rest } = props;
 const hasError = meta.touched && meta.invalid;

 return (
   <Form.Item
     label={label}
     help={hasError && meta.error}
     hasFeedback={hasFeedback && hasError}
     validateStatus={hasError ? 'error' : 'success'}
   >
     <Input {...input} {...rest} />
   </Form.Item>
 );
};

renderInput.propTypes = {
 input: PropTypes.shape({
   name: PropTypes.string.isRequired,
 }).isRequired,
 meta: PropTypes.shape({
   asyncValidating: PropTypes.bool,
   error: PropTypes.string,
   touched: PropTypes.bool,
 }).isRequired,
 label: PropTypes.node,
 type: PropTypes.string,
 hasFeedback: PropTypes.bool,
};

export default renderInput;

If you take a closer look at the code, we've combined the Input and Form component from antd to provide error feedback to the user. If you check the usage on the documentation site https://ant.design/components/form/, you can see Form. An item component has props, such as hasFeedback, and validateStatus, which can be used to provide feedback to the user.

5. Handling form submission

An onSubmit function should be passed to the component and provided to the form component that passes the form data in the form of JSON. The following code shows the container component for the Login component:

import LoginForm from ‘./LoginForm’;

class LoginPage extends Component {
 submit = values => {
      console.log(values)
 }
 render() {
   return (
     <div className="login-containers">
          <LoginForm onSubmit={this.onSubmit} />
     </div>
   );
 }
}

If you are new to Redux and React, you can go ahead and skip redux-form and build your own components. This will help you build confidence in the subject. Go ahead and run the code, submit the form, and check out the values in the console.