一个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 })
}
}
}
