Redux源码分析之bindActionCreators

Redux源码分析之基本概念

Redux源码分析之createStore

Redux源码分析之bindActionCreators

Redux源码分析之combineReducers

Redux源码分析之compose

Redux源码分析之applyMiddleware

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))
}

参考：

Redux从设计到源码

Redux系列x：源码分析

redux源码解析-redux的架构 - chenby - 博客园

解 redux 源码-知乎

Redux-source-analyze

深入到源码：解读 redux 的设计思路与用法

深入理解redux中间件