redux中如何发起异步请求

一个redux的基本流程是 事件触发会通过store.dispatch 一个action，进而触发reducer，在reducer中通过判断到底是哪个action触发的。从而进行逻辑处理。返回数据。因为createStore接收store作为参数，所以ruducer返回的数据最后直接导致 了store的变化，而store被注入到了根组件中，这样只要reducer变换了，子组件获取到的store就是变化以后的store。

再回到异步请求，因为redux规定：action只能是一个对象。而刚刚讲到的redux的整个流程，store是唯一数据源，store.dispatch阶段不可能进行异步请求，而reducer只负责处理actions传过来的数据，然后再加工返回。也不可能做异步处理，只能在action阶段做文章。我们通过一定的手段让action不再只是一个对象，而是一个函数。因为是函数，就有无限种可能。如何实现呢？我们引入了中间件机制。本例中就用的是redux-thunk.

核心思路 利用中间件 redux-thunk 来处理异步函数

npm i redux-thunk

import thunk from 'redux-thunk';
import { createStore, applyMiddleware } from 'redux';
export const store = createStore(reducer, applyMiddleware(thunk))

// 配置store的时候，可以通过applyMiddleware来应用中间件 应用后 组件中 dispatch中可以传入一个函数

// 需要调用异步的组件
this.props.dispatch(asyncUserAction.refreshUserInfo())

// refreshUserInfo返回一个异步函数， 内部处理完逻辑后 再次调用dispatch 提交真正的action

export const asyncUserAction = {
  refreshUserInfo() {
    return async (dispatch, getState) => {
      const { role, userId } = getState().user
      let res = {};
      switch (role) {
        case 'salesman':
          res = await getSalesmanInfo(userId)
          break;
          case 'admin': case: 'superAdmin':
          res = await getAdminInfo(userId)
          break;
        default:
          break;
      }
      dispatch({ type: 'setUserInfo', data: res.data })
    }
  }
}