§ bindActionCreators(actionCreators, dispatch)

这个 API 有点鸡肋，它无非就是做了这件事情：dispatch(ActionCreator(XXX))

⊙ 源码分析

  1. /* 为 Action Creator 加装上自动 dispatch 技能 */
  2. function bindActionCreator(actionCreator, dispatch) {
  3.   return (...args) => dispatch(actionCreator(...args))
  4. }
  6. export default function bindActionCreators(actionCreators, dispatch) {
  7.   // 省去一大坨类型判断
  8.   var keys = Object.keys(actionCreators)
  9.   var boundActionCreators = {}
  10.   for (var i = 0; i < keys.length; i++) {
  11.     var key = keys[i]
  12.     var actionCreator = actionCreators[key]
  13.     if (typeof actionCreator === 'function') {
  14.       // 逐个装上自动 dispatch 技能
  15.       boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
  16.     }
  17.   }
  18.   return boundActionCreators
  19. }

⊙ 应用场景

简明教程中的 code-5 如下：

  1. <--! 本代码块记为 code-5 -->
  2. <input id="todoInput" type="text" />
  3. <button id="btn">提交</button>
  5. <script>
  6. $('#btn').on('click', function() {
  7.   var content = $('#todoInput').val() // 获取输入框的值
  8.   var action = addTodo(content)       // 执行 Action Creator 获得 action
  9.   store.dispatch(action)              // 手动显式 dispatch 一个 action
  10. })
  11. </script>

我们看到，调用 addTodo 这个 Action Creator 后得到一个 action，之后又要手动 dispatch(action)
如果是只有一个两个 Action Creator 还是可以接受，但如果有很多个那就显得有点重复了（其实我觉得不重复哈哈哈）
这个时候我们就可以利用 bindActionCreators 实现自动 dispatch：

  1. <input id="todoInput" type="text" />
  2. <button id="btn">提交</button>
  4. <script>
  5. // 全局引入 Redux、jQuery，同时 store 是全局变量
  6. var actionsCreators = Redux.bindActionCreators(
  7.   { addTodo: addTodo },
  8.   store.dispatch // 传入 dispatch 函数
  9. )
  11. $('#btn').on('click', function() {
  12.   var content = $('#todoInput').val()
  13.   actionCreators.addTodo(content) // 它会自动 dispatch
  14. })
  15. </script>

综上，这个 API 没啥卵用，尤其是异步场景下，基本用不上