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/
