是 redux 异步中间件。

可以扩展 action 的类型。

action 可以返回一个 promise。Copy

import isPromise from 'is-promise';
import { isFSA } from 'flux-standard-action';

// == 此处的 { dispatch, getState } 实际被传入的是 applyMiddleware.js 中的 middlewareAPI
// == 此处的 next 实际被传入的是 applyMiddleware.js 中的 store.dispatch
export default function promiseMiddleware({ dispatch }) {
  return next => action => {
    // == 1、action 不是标准的FSA
    if (!isFSA(action)) {
      // == 执行此 action Promise 函数的 then 方法中再调用 dispatch 方法真正的改变应用的状态
      return isPromise(action) ? action.then(dispatch) : next(action);
    }

    // == 2、action 是标准的FSA
    // == 执行此 action Promise 函数的 then 方法中再调用 dispatch 方法真正的改变应用的状态
    return isPromise(action.payload)
      ? action.payload
          .then(result => dispatch({ ...action, payload: result }))
          .catch(error => {
            dispatch({ ...action, payload: error, error: true });
            return Promise.reject(error);
          })
      : next(action);
  };
}Copy

以 action 不是标准的 FSA 对象为例，action 是标准的 FSA 对象逻辑分析一致:

action 为 Promise 函数的话，执行此 Promise 函数，传入 dispatch，

然后可以在此 Promise 函数的 then 方法里再调用 dispatch 方法真正的改变应用的状态。Copy

export const actionObj = {
    getData(option) {
        // == 返回的结果不是标准的 action，是一个函数: 通过 redux-promise 中间件处理
        return new Promise((res, rej) => {
          res({type, payload})
        });
    },
};Copy

// == connect 的实现后续会讲到
export default connect(
    state => ({
        data: state.data.toJSON(),
    }),
    dispatch => {
        return {
            // == 通过 connect 让组件具有 actions 属性，actions 的值是 actionObj 对象，后续讲 connect 会讲到
            // == 执行 this.props.actions.getData(data) 实际是执行 store.dispatch(actionObj.getData())
            // == actionObj.getData(data) 返回的结果不是标准的 action，是一个函数
            actions: bindActionCreators(actionObj, dispatch)
        };
   }
)(Index);Copy