Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之...
bindActionCreators：对disptach的一种封装，可以直接执行或者通过属性方法的调用隐式的调用dispatch,而不用显式调用dispacth
现在我们修改一下代码，引入 acion creater 和 bindActionCreaters，一起来看一下使用效果上有什么不同,重点看红色部分。
let { createStore, bindActionCreators } = self.Redux//默认statelet todoList = []// reducerlet 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 }}//创建storelet store = createStore(todoReducer)//订阅function subscribe1Fn() { // 输出state console.log(store.getState())}store.subscribe(subscribe1Fn)// action createrlet 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))}
参考：
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
上一篇：Redux源码分析之createStore 下一篇：部署LNMP+Redis
