详解 redux 中的异步处理

主要通过applyMiddleware函数，借助redux中间件来处理，即通过中间件模式将原始dispatch函数进行封装处理，形成洋葱模型，将原始dispatch函数作为参数传递，在处理异步事件时，再调用原始dispatch函数修改数据状态。

redux中的异步处理流程通常如下：

• 在异步操作开始前，发送action，用来表示要发起异步操作，用户界面应该有所提示
• 在异步操作结束后，发送action，用来表示异步操作结束，根据异步操作的结果，对store中的数据和用户界面进行更新

redux中通常使用中间件来进行异步处理，常用的中间件包括 redux-thunk 或 redux-saga。

redux-thunk 使用高阶函数实现， 判别action的类型，如果action是函数，就调用这个函数，书写较为简单 。

• 使用redux-thunk

  • 安装: npm install redux-thunk
  • 创建store时使用 applyMiddleware 开启thunk中间件
  • 使action可以返回函数, 使用dispatch提交action

  // 异步 action
  const action = () => dispatch => (
    Promise.then(res => dispatch('同步action'))
  )
  

• redux-saga

  • 创建 generator 函数ÿ