Why build your forms with Redux Form – DailyJS – Medium

Why build your forms with #Redux Form:  #ReactJS

  • 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 the event handler has put in there.Ok but, that doesn’t answer the first questionBy having all the application state in the JavaScript app and using controlled components we get a single source of truth and take full control over the application behavior.In the context of a form, our React component is able to:do instant validation;control the input value format;enable, disable, show or hide components given the state;handle dynamic inputs.Although it is highly recommended to use controlled components, it is also good to point the drawback that you will have to create event handlers for all your inputs and that may be a bunch of code that doesn’t make sense to the application.What about Redux Form?Now that is known why to keep the form data in the state and you reason if that makes sense for your application we can come back to our main subject.
  • 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 bit of code and see how to do a setup.Here we connect the form component to Redux by decorating it with the high-order component reduxForm.
  • 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 the InputText component to see the props we receive from the Field.One important point is that it’s still a developer’s responsibility to write the form and inputs components, this way the library does not take the flexibility from you to manage the behaviors of your form the way you want, or even add custom ones.And to finish our integration we add a reducer that will handle the state changes of your form.Simple isn’t it.Just one more point.
  • 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 all your form data in application state gives you control over its behavior and you can easily implement that on a React/Redux application with Redux Form.I have created a repository on GitHub with the implementation above.

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…
Continue reading “Why build your forms with Redux Form – DailyJS – Medium”

React to async/await – Alexander Lee – Medium

React to async/await #reactjs #es7

  • For the examples below, I will show I would normally approach each problem using Promises followed by the async await method.ActionsIn this example, this is how I would typically approach creating a new user via promises.Promise approachexport default function createUser(params) { const request = axios.post(‘http://www…, params); return (dispatch) = request function onSuccess(success) { dispatch({ type: CREATE_USER, payload: success }); return success; } function onError(error) { dispatch({ type: ERROR_GENERATED, error }); return error; } .
  • async/await approachexport default function createUser(params) { return async dispatch = { function onSuccess(success) { dispatch({ type: CREATE_USER, payload: success }); return success; } function onError(error) { dispatch({ type: ERROR_GENERATED, error }); return error; } try { const success = await axios.post(‘http://www…, params); return onSuccess(success); } catch (error) { return onError(error); } }}I added the async prior to the dispatch andawait in front of axios.post .
  • Promise approachimport React, { Component } from ‘react’;export default class userForm extends Component { constructor(props) { super(props); this.onSubmit = this.onSubmit.bind(this); } onSubmit(e) { e.preventDefault(); let formInput = this.refs.createUser; .
  • etc }, (error) = { // Do something with the error }); } render() { return ( form onSubmit={this.onSubmit} input placeholder=”current user” ref=”createUser” / buttonSubmit/button /form ); }}After a form is submitted via click and this.props.createUser,we are returned a promise.
  • Lets see how we can do it using the async/await method.async/await approachimport React, { Component } from ‘react’;export default class userForm extends Component { constructor(props) { super(props); this.onSubmit = this.onSubmit.bind(this); } async onSubmit(e) { e.preventDefault(); let formInput = this.refs.createUser; try { const response = await // do something with response } catch(error) { // do something with error } } render() { return ( form onSubmit={this.onSubmit} input placeholder=”current user” ref=”createUser” / buttonSubmit/button /form ); }}Like our action functions, the async/await approach in our components allows our asynchronous code to look synchronous.

I got curious this past weekend about javascript’s ES7 async/await. After reading a couple of blog posts I got the basic idea of how it works and why it’s gotten so much chatter. Long story short, it…
Continue reading “React to async/await – Alexander Lee – Medium”