redux的bindActionCreators源碼,中文翻譯

MockingBird 發(fā)布于2019-08-23 15:39 / 2356人閱讀

摘要：就是給創(chuàng)建函數(shù)綁定了可以直接以普通函數(shù)執(zhí)行而不用這樣寫(xiě)比如下面生成一個(gè)對(duì)象對(duì)象里面的值是那么可以直接執(zhí)行將一個(gè)值是創(chuàng)建函數(shù)的對(duì)象變成一個(gè)具有相同值的對(duì)象但是每個(gè)函數(shù)都被封裝到回調(diào)里面這樣它們就有可能被直接觸發(fā)這樣只是比較方便你也可以調(diào)用為了

bindActionCreators就是給action創(chuàng)建函數(shù)綁定了dispatch,
可以直接以普通函數(shù)執(zhí)行,而不用dispatch(actionCreator)這樣寫(xiě).
比如下面,bindActionCreators生成一個(gè)對(duì)象,對(duì)象里面的value值是function,
那么可以直接this.boundActionCreators.addTodo()執(zhí)行**

function bindActionCreator(actionCreator, dispatch) {
  return (...args) => dispatch(actionCreator(...args))
}

/**
 * Turns an object whose values are action creators, into an object with the
 * same keys, but with every function wrapped into a `dispatch` call so they
 * may be invoked directly. This is just a convenience method, as you can call
 * `store.dispatch(MyActionCreators.doSomething())` yourself just fine.
 *
 * 將一個(gè)value值是action創(chuàng)建函數(shù)的對(duì)象變成一個(gè)具有相同key值的對(duì)象,但是每個(gè)函數(shù)都被封裝到
 * `dispatch`回調(diào)里面,這樣它們就有可能被直接觸發(fā). 這樣只是比較方便,你也可以調(diào)用
 * `store.dispatch(MyActionCreators.doSomething())`
 * 
 * For convenience, you can also pass a single function as the first argument,
 * and get a function in return.
 *
 * 為了方便,你也可以傳單個(gè)函數(shù)作為第一個(gè)參數(shù),然后返回一個(gè)函樹(shù)
 * 
 * @param {Function|Object} actionCreators An object whose values are action
 * creator functions. One handy way to obtain it is to use ES6 `import * as`
 * syntax. You may also pass a single function.
 *
 * actionCreators 是一個(gè)value值是action創(chuàng)建函數(shù)的對(duì)象,一個(gè)很方便獲取到它的方法就是
 * 使用ES6 的`import * as `語(yǔ)法.也可以傳單個(gè)函數(shù)
 * 
 * @param {Function} dispatch The `dispatch` function available on your Redux
 * store.
 *
 * dispatch就是redux 里store的dispatch
 * 
 * @returns {Function|Object} The object mimicking the original object, but with
 * every action creator wrapped into the `dispatch` call. If you passed a
 * function as `actionCreators`, the return value will also be a single
 * function.
 * 
 * 返回的對(duì)象和初始的對(duì)選象很像,但每一個(gè)action創(chuàng)建函數(shù)都給封裝到`dispatch`回調(diào)里面
 * 如果你傳單個(gè)函數(shù)作為`actionCreators`,那返回值也是一個(gè)單個(gè)函數(shù)
 */
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"?`
    )
    //bindActionCreators的參數(shù)應(yīng)該是對(duì)象或者函數(shù),而不是空或其他類型,
    //你是不是把"import * as ActionCreators from"寫(xiě)成了"import 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) //就是(...args) => dispatch(actionCreator(...args))
    }
  }
  return boundActionCreators
}

源碼解析請(qǐng)參考https://segmentfault.com/a/11...