简介
redux-thunk 源码学习笔记。
作用
是 redux 异步中间件。
可以扩展 action 的类型。
action 可以返回一个函数。
源码解析
function createThunkMiddleware(extraArgument) {
// == 此处的 { dispatch, getState } 实际被传入的是 applyMiddleware.js 中的 middlewareAPI
// == 此处的 next 实际被传入的是 applyMiddleware.js 中的 store.dispatch
return ({ dispatch, getState }) => next => action => {
if (typeof action === 'function') {
// == 执行 action 函数，在 action 内部再调用 dispatch 方法真正的改变应用的状态
// == 这里传入 dispatch 只是形参，在真正调用的时候传入的 next 才是实参
return action(dispatch, getState, extraArgument);
}
return next(action);
};
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
执行逻辑
action 为函数的话，执行此 action 函数，传入 dispatch 和 getState，
然后可以在此 action 函数内部再调用 dispatch 方法真正的改变应用的状态。
使用案例
actionCreators
export const actionObj = {
getData(option) {
// == 返回的结果不是标准的 action，是一个函数: 通过 redux-thunk 中间件处理
return dispatch => {
return Get(url, option).then(res => {
dispatch({ 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);