Managing Form State In React Using Redux Form

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 https://redux-form.com/7.0.1/