简介
redux-promise 源码学习笔记。
作用
是 redux 异步中间件。
可以扩展 action 的类型。
action 可以返回一个 promise。
源码解析
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);
};
}
执行逻辑
以 action 不是标准的 FSA 对象为例，action 是标准的 FSA 对象逻辑分析一致:
action 为 Promise 函数的话，执行此 Promise 函数，传入 dispatch，
然后可以在此 Promise 函数的 then 方法里再调用 dispatch 方法真正的改变应用的状态。
使用案例
actionCreators
export const actionObj = {
getData(option) {
// == 返回的结果不是标准的 action，是一个函数: 通过 redux-promise 中间件处理
return new Promise((res, rej) => {
res({type, payload})
});
},
};
connect
// == 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);