Redux源码分析之bindActionCreators
bindActionCreators：对disptach的一种封装，可以直接执行或者通过属性方法的调用隐式的调用dispatch,而不用显式调用dispacth
现在我们修改一下代码，引入 acion creater 和 bindActionCreaters，一起来看一下使用效果上有什么不同,重点看红色部分。
let { createStore, bindActionCreators } = self.Redux
//默认state
let todoList = []
// reducer
let todoReducer = function (state = todoList, action) {
switch (action.type) {
case 'add':
return [...state, action.todo]
case 'delete':
return state.filter(todo => todo.id !== action.id)
default:
return state
}
}
//创建store
let store = createStore(todoReducer)
//订阅
function subscribe1Fn() {
// 输出state
console.log(store.getState())
}
store.subscribe(subscribe1Fn)
// action creater
let actionCreaters = {
add: function (todo) { //添加
return {
type: 'add',
todo
}
}, delete: function (id) {
return {
type: 'delete',
id
}
}
}
let boundActions = bindActionCreators(actionCreaters, store.dispatch)
boundActions.add({
id: 12,
content: '睡觉觉'
})
let boundAdd = bindActionCreators(actionCreaters.add, store.dispatch)
boundAdd({
id: 13,
content: '陪媳妇'
})
输出结果:
从上面分析 bindActionCreators，两种调用方式，都是对调用的一种封装，不用每次都 dispatch。
第一
- bindActionCreators 传入action creater和 dispatch方法
- 返回一个函数，直接调用就会更新数据，不用显式调用dispatch
第二
- bindActionCreators 传入一个对象（属性都是action creater）和 dispatch方法
- 返回一个对象，直接可以调用属性方法，就会更新数据
我们来看看bindActionCreators.js 源码，
function bindActionCreator(actionCreator, dispatch) { return (...args) => dispatch(actionCreator(...args)) } export default function bindActionCreators(actionCreators, dispatch) { if (typeof actionCreators === 'function') { return bindActionCreator(actionCreators, dispatch) } if (typeof actionCreators !== 'object' || actionCreators === null) { throw new Error( `bindActionCreators expected an object or a function, instead received ${actionCreators === null ? 'null' : typeof actionCreators}. ` + `Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?` ) } const keys = Object.keys(actionCreators) const boundActionCreators = {} for (let i = 0; i < keys.length; i++) { const key = keys[i] const actionCreator = actionCreators[key] if (typeof actionCreator === 'function') { boundActionCreators[key] = bindActionCreator(actionCreator, dispatch) } } return boundActionCreators }
bindActionCreators.js 里面有一个 bindActionCreator,bindActionCreators 方法，
bindActionCreators会根据传入的是函数还是对象，采取不同的处理方式，
- 入参是函数，返回函数，
- 传入对象，返回对象。
所以重点反而是 bindActionCreator 方法，我们来分解一下bindActionCreator，
- 返回的是一个函数
- ...args是动态参数，（rest 参数）
- actionCreator(...args) 返回一个对象，拿add方法来说，等同于 add(..args)
那我们来看看 let boundAdd = bindActionCreators(actionCreaters.add, store.dispatch)，这个方法返回等同如下 ,那么就简单了，执行boundAdd 就是dispach action
let boundAdd = function(){
dispatch(actionCreators.add(...arguments))
}
参考：
