DEV Community

Cover image for The Cause Of Building Redux Form with considering Application State
Amelia Smith
Amelia Smith

Posted on

The Cause Of Building Redux Form with considering Application State

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?

As time passes, web development increases its responsibility towards client-side applications, whereas in the past, it was just HTML, and all work was on a server, and as per time, it changed to complex javaScript applications.

The javascript application lay hold of the DOM as we can visualize the popular libraries such as Angular, jQuery, and recent one React. React grasps the attention of the community as it comes up with the concept of unidirectional data flow that seems that data flows down a component tree at the same time UI event changes the data that updates only the UI part that was under data source. Moreover, React is the first library that can easily render a UI that shows a group of data not in the DOM and comes up with another concept known as controlled components.

You may be thinking that what is a controlled component is so, let me clear this first.

Controlled Component

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!

So, if we have all the application state in a javaScript application using controlled components, you can opt for a single source of truth with full control of application behavior. Moreover, In Redux form, React components can handle the input value format, control dynamic inputs, can work on instant validation, hide or show components, and enable, disable components that are given in the state.

Although it is more recommended to use controlled components.

Redux form

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
Focused field
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.

High Control

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.

Consistency

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.

Persistence

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.

Final Words

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.

In addition, we also have great options such as Final-form and formik, the React form management solution used in React component state. As we do not need to depend on Redux for state management.

Although for fun building forms from scratch, you can also read How to Integrate Redux-Saga in React Native App.

Discussion (0)