redux的bindActionCreators源碼,中文翻譯

如果不清楚 可以查看https://segmentfault.com/a/1190000018395291


bindActionCreators就是給action創(chuàng)建函數(shù)綁定了dispatch,可以直接以普通函數(shù)執(zhí)行,而不用dispatch(actionCreator)這樣寫.比如下面,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è)函樹

*

* @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"寫成了"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)

? ? ? ? ? ? ? ? ? ? ? ?}

? ? ? ? ? ? ? ?}

? ? ? ? ? ? return boundActionCreators

}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容