When I build a form for a React Redux application, I may or may not put the value of the input in the application state with small or no editing as my form is simple. To be very true, I never realize what it means, but after an experience of building the complex form, I realize that it was worth it to keep input values in the application state.
You might be thoughtful as it's just a Simple Redux form. Does it require input value in the application state? Don't worry. My head is also striking with this question so, let's clear this question with more clarity.
What does form value mean on Application State?
You may be thinking that what is a controlled component is so, let me clear this first.
Controlled components are nothing but an HTML input that receives the value as its property. Moreover, it also gets an event handler. The event handler updates state at the time of user interaction.
Yes, but this will not answer our question, alright!
Although it is more recommended to use controlled components.
Now you may be clear with the reason for keeping form data in the state. As it makes more sense in the application. So developing Redux form as its track of all application form state such as :
Each field in the form
Each field value
Fields that user Interact
The field values are valid
If the form is submitted
If there is any asynchronous validation
Where does the Redux form batten?
Ease In Development
If you consider the higher-order components in the Redux form field, you are almost done as you get out of the box form, but it is also worth mentioning that you can also get productive results if you build form only with React.
You can control and manipulate the form from everywhere in the application. Moreover, it provides a function to trigger Redux action providers with Redux form, and that solves the issue of creating own action and Redux reducers.
Redux form is flexible as it takes any input. In the field, anything works, such as regular HTM inputs, custom third-party inputs, and fancy select components with no standard form. As we need to use the right props in it.
All of the forms have a similar data structure so. You have the same information for every field and form like field value, form validity, and other information in the redux store.
You can also build form consistently by using React while the Redux form will enforce it.
As the state in the Redux store, the Redux form can run smoothly pluggable with other tools from the ecosystem.
Let assume if you want to save the draft from the user's input so individuals can feel and finish up and submit the form afterward. In addition, the Redux persists, and the Redux form makes it easier. While the process of rehydrating in the Redux store auto-fills like UI magic.
In the building of React form, my approach is to keep the data that matters to the application and make more sight to the application state so, pick it up as per requirement.
Although for fun building forms from scratch, you can also read How to Integrate Redux-Saga in React Native App.