Redux 源码解析系列（二）-- bindActionCreator

bindActionCreator 的作用其实就是用来将一个对象的值是action creators转成一个同样key的对象，但是转化的这个对象的值，是将action creator包裹在dispatch里的函数。

也就是说,假设下面的actionCreator.js 我们import进来这个对象

export function addTodo(text) {
  return {
    type: 'ADD_TODO',
    text
  }
}

export function removeTodo(id) {
  return {
    type: 'REMOVE_TODO',
    id
  }
}

得到的对象为

{
   addTodo : text => 
    { 
      type: 'ADD_TODO',
      text
    },
   removeTodo : id => {
      type: 'REMOVE_TODO',
      id
    }
}

经过bindActionCreator就会变成

{
   addTodo : text => dispatch(addTodo('text'));
   removeTodo : id => dispatch(removeTodo('id'));
}

相当于会dispatch这个action。

参数：
1、actionCretors 可以是一个对象，也可以是一个单个函数
2、dispatch函数

返回：
单个函数，或者是一个对象。

传入一个function

如果只是传入一个function，返回的也是一个function

例如：

const toggleTodo = (id) => {
    return {
        type: 'TOGGLE_TODO',
        id
    };
};

export { toggleTodo };
let boundActionCreators = bindActionCreators(toggleTodo, dispatch);

//此时boundActionCreators  = (id) => dispatch(toggleTodo(id));

所以bindActionCreator比较简单：
1、判断传入的参数是否是object，如果是函数，就直接返回一个包裹dispatch的函数
2、如果是object，就根据相应的key，生成包裹dispatch的函数即可

function bindActionCreator(actionCreator, dispatch) {
  return function() { return dispatch(actionCreator.bind(undefined, arguments))}
}
  

function bindActionCreator(actionCreator, dispatch) {
 
  return function() { return dispatch(actionCreator.bind(undefined, arguments))}
}

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 = {}
   keys.forEach((key) => {
     boundActionCreators[key] = bindActionCreator(actionCreators[key], dispatch)
   })
   return boundActionCreators
}

总结，bindActionCreator 的作用就是返回包裹dispatch的函数可以直接使用。
一般我们会用来mapDispatchToProps里。