Why build your forms with Redux Form – DailyJS – Medium

  • Why build your forms with Redux FormWhen I usually create forms for my React/Redux applications I tend to keep the value of the inputs on the application state, with little to no editing, (because my forms are usually simple), I never stopped to realize what that means.
  • It also receives an event handler that will update the state when the user interacts with it.It means that when the user types the letter “J” on the input, what is visible is not the same “J”, it may be an identical “J” that comes from the state, or whatever…
  • It keeps track of all common application form state such as:The fields that are in the form;The values of each field;The focused field;If the field values are valid;The fields that the user have interacted with;If the form is being submitted;If is happening any asynchronous validation.Let’s take a look at a…
  • It will also hand us the handleSubmit function, which will take care of the submission behavior.The Field component takes our input component as its props and acts as a container, bringing the application state to the input component and binding the event handlers to update the state in store.Look at…
  • Look that the default value of the input is defined when the high-order component reduxForm is called and comes to the input within the prop input and not from the react’s prop defaultValue, this way we guarantee that our form values are all represented in the application state.In summary, having…

When I usually create forms for my React/Redux applications I tend to keep the value of the inputs on the application state, with little to no editing, (because my forms are usually simple), I never…

Why build your forms with Redux FormWhen I usually create forms for my React/Redux applications I tend to keep the value of the inputs on the application state, with little to no editing, (because my forms are usually simple), I never stopped to realize what that means. But when I and my team at ThoughtWorks faced a project with more complex form requirements, we started to wonder if it was worth to do all that Redux boilerplate to keep our inputs values into our application state.In our discussion, I heard things like: “It is just a form!”, “Do we really need the input values in our application state?”.After a lot of talk, we started to consider using the library Redux Form by Erik Rasmussen, but it arose other questions like “It will remove our flexibility to make custom behaviors, won’t it?”.The end of this story is that we actually decided to use Redux Form and I thought that sharing why may save you some time.Why have the form values on application state?Let’s get some contextThe history of web development shows a move to increase the responsibility of the client side application, which in the past was just the HTML and all the work was made on server — now we have very complex JavaScript applications.These JavaScript applications have taken the responsibility from the DOM as we could see with famous libraries like jQuery, Angular and more recently React. Since this last one took attention from the community, it brought with it the concept of…

Why build your forms with Redux Form – DailyJS – Medium