Methods for using Async/Await for React/Redux applications

Async/Await is a new feature of the ES7 standard that has not yet been officially announced. In short, it is to let you write asynchronous code with the mindset of synchronous methods. For the front-end, writing asynchronous task code has gone through the popular Promise that callsback to the present, and will eventually evolve into Async/Await. Although this feature has not been officially released yet, we can already use it in our applications using babel polyfill.

Now suppose a simple React/Redux application, I will introduce Async/Await to its code.

Actions

There is an Action for creating a new article in this example. The traditional method is to use Promise in combination with Redux-thunk middleware.

import axios from 'axios'

export default function createPost (params) { 
  const success = (result) => {
    dispatch({
      type: 'CREATE_POST_SUCCESS',
      payload: result
    })
    return result
  }

  const fail = (err) => {
    dispatch({
      type: 'CREATE_POST_FAIL',
      err
    })
    return err
  }

  return dispatch => {
    return ('http://xxxxx', params)
    .then(success)
    .catch(fail)
  }
}

Now rewrite it to an implementation of async/await:

import axios from 'axios'

export default function createPost (params) { 
  const success = (result) => {
    dispatch({
      type: 'CREATE_POST_SUCCESS',
      payload: result
    })
    return result
  }

  const fail = (err) => {
    dispatch({
      type: 'CREATE_POST_FAIL',
      err
    })
    return err
  }

  return async dispatch => {
    try {
      const result = await ('http://xxxxx', params)
      return success(result)
    } catch (err) {
      return fail(err)
    }
  }
}

async and await are used in pairs, and are characterized by making the code look similar to the synchronous code.

Components

Similarly, in the React component, we also compare the similarities and differences between Promise and Async/Await methods.

Traditionally using Promise:

import React, { Component } from 'react' 
import { connect } from 'react-redux' 
import { createPost } from '../actions/post'

class PostEditForm extends Component { 
  constructor(props) {
    super(props)
  }

  contributePost = e => {
    ()

    // .... get form values as params

    (params)
    .then(response => {
      // show success message
    })
    .catch(err => {
      // show error tips
    })
  }

  render () {
    return (
      <form onSubmit={}>
        <input name="title"/>
        <textarea name="content"/>
        <button>Create</button>
      </form>
    )
  }
}

export default connect(null, dispatch => { 
  return {
    createPost: params => dispatch(createPost(params))
  }
})(PostEditForm)

If using Async/Await

import React, { Component } from 'react' 
import { connect } from 'react-redux' 
import { createPost } from '../actions/post'

class PostEditForm extends Component { 
  constructor(props) {
    super(props)
  }

  async contributePost = e => {
    ()

    // .... get form values as params

    try {
      const result = await (params)
      // show success message
    } catch (err) {
      // show error tips
    }
  }

  render () {
    return (
      <form onSubmit={}>
        <input name="title"/>
        <textarea name="content"/>
        <button>Create</button>
      </form>
    )
  }
}

export default connect(null, dispatch => { 
  return {
    createPost: params => dispatch(createPost(params))
  }
})(PostEditForm)

It can be seen that the two modes, Async\Await, are more intuitive and concise, are the future trends. However, at present, it is necessary to use babel's transform-async-to-module-method plug-in to convert it into a browser-supported syntax. Although there is no performance improvement, the code writing experience is better.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.