简介
Redux bindActionCreator 源码及使用学习笔记。
用途
配合 react-redux 的 connect 使用，可以不让组件察觉到 Redux 的存在，
即在 react 组件中不直接调用 store 的 dispatch 方法。
bindActionCreator 源码
是一个函数，接收 actionCreator 函数和 dispatch 函数。
返回一个函数，此函数会 dispatch 一个 action
此 action 是 actionCreator 函数的执行结果
function bindActionCreator(actionCreator, dispatch) {
return function() {
return dispatch(actionCreator.apply(this, arguments))
}
}
bindActionCreators 源码
是一个函数，接收 actionCreators 函数和 dispatch 函数。
返回一个函数或对象
1、actionCreators 是函数的话直接调用 bindActionCreator 函数
2、actionCreators 是对象的话循环遍历 actionCreators，返回一个对象:
对象每一个 key 的 value 是 bindActionCreator(actionCreator, dispatch)
export default function bindActionCreators(actionCreators, dispatch) {
/* 一、actionCreators 是函数的话直接调用 bindActionCreator 函数 */
if (typeof actionCreators === 'function') {
return bindActionCreator(actionCreators, dispatch)
}
/* actionCreators 必须是对象或者函数 */
if (typeof actionCreators !== 'object' || actionCreators === null) {
// == 省略
}
/* 二、actionCreators 是对象的话循环遍历 actionCreators，返回一个对象 */
const boundActionCreators = {}
for (const key in actionCreators) {
const actionCreator = actionCreators[key]
if (typeof actionCreator === 'function') {
boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
}
}
return boundActionCreators
}
bindActionCreators 用法示例
actionCreators 为函数
actionCreators
function 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 让组件具有 getData 属性，后续讲 connect 会讲到
// == 执行 this.props.getData(data) 实际是执行 store.dispatch(getData())
// == getData(data) 不是标准的 action，而是一个函数，后续讲中间件会讲到
getData: bindActionCreators(getData, dispatch)
};
}
)(Index);
actionCreators 为对象
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);