Managing Form State In React Using Redux Form

01 / May / 2022 by Gaurav Pandey 0 comments

What is Redux Form?

Redux Form is a HOC(Higher Order Component) which uses react-redux so that the HTML forms in react can store all its state in redux.

Advantage of using Redux Form?

  • Redux Form is very easy to use and implement, we just have to wrap our form component with the HOC provided by Redux Form and we are good to go.
  • Applying validation to the form is very easy in Redux Form, we can apply validation to all the fields as well as validations for individual fields.

Steps to implement Redux Form in your application

  • Create a React Project

  • Install package

  • Creating a Redux Store

  • Create a form using redux form

    Importing Field and reduxForm from the redux-form package.

    Creating form using the Field imported from redux-form.
    textField used to make custom components inside Field.
  • Connect the form to Redux-Form

    This step will bind the state of the form values to the redux.
  • Adding validations to the Form

    Create a validate.js file

    Add the validate function to the reduxForm()
  • Result of the above setup

    When the form is loaded in the DOM, there becomes a key ‘Login’ in the redux under in the form reducer

    Once we enter values inside the fields it will automatically be reflected inside the redux


Above are the steps to make a normal reduxForm, but there is more to reduxForm, to dive deep into reduxForm do check its official website


Leave a Reply

Your email address will not be published. Required fields are marked *