成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

redux源碼分析之三：bindActionCreators.js

Dionysus_go / 776人閱讀

摘要：歡迎關(guān)注源碼分析系列文章源碼分析之一源碼分析之二源碼分析之三源碼分析之四源碼分析之五文件算是非常簡單的一個文件了，該文件就實現(xiàn)一個目的以前這樣觸發(fā)一個，即，現(xiàn)在變成這樣觸發(fā)一個。目的很單純，簡化某個的調(diào)用。

歡迎關(guān)注redux源碼分析系列文章：
redux源碼分析之一：createStore.js
redux源碼分析之二：combineReducers.js
redux源碼分析之三：bindActionCreators.js
redux源碼分析之四：compose.js
redux源碼分析之五：applyMiddleware

bindActionCreators.js文件算是非常簡單的一個文件了，該文件就實現(xiàn)一個目的：以前這樣觸發(fā)一個action，即dispatch(actionCreator(args))，現(xiàn)在變成這樣觸發(fā)一個action: boundActionCreator(args)。目的很單純，簡化某個action的調(diào)用。

實現(xiàn)上面那個效果，僅需一行代碼，也就是源碼文件中的第一個函數(shù)：

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

但是bindActionCreators.js文件對外提供的并不是上面的函數(shù)，而是另外一個，源碼如下：

export default function bindActionCreators(actionCreators, dispatch) {
  //如果actionCreators是一個函數(shù)，則說明只有一個actionCreator，那直接調(diào)用bindActionCreator就行了
  if (typeof actionCreators === "function") {
    return bindActionCreator(actionCreators, dispatch)
  }

  //如果是actionCreator是對象，或者是null的話，報錯嘍
  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"?`
    )
  }

  //保持actionCreators里面原來的key，只是把key對應(yīng)的value都轉(zhuǎn)成了boundActionCreator
  const keys = Object.keys(actionCreators)
  const boundActionCreators = {}
  for (let i = 0; i < keys.length; i++) {
    const key = keys[i]
    const actionCreator = actionCreators[key]
    //只對value是函數(shù)的key進行轉(zhuǎn)換，其他的都過濾掉了
    if (typeof actionCreator === "function") {
      boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
    }
  }

  //返回綁定之后的對象
  return boundActionCreators
}

這個函數(shù)做的事情也很簡單，只是把actionCreators這個對象里面包含的每一個actionCreator按照原來的key的方式全部都封裝了一遍而已，具體看代碼嘍

完整解析請參考我的github：https://github.com/abczhijia/...，如果對您有幫助，歡迎star，有任何問題也請指正。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90026.html

相關(guān)文章

  • 我的源碼閱讀之路：redux源碼剖析

    摘要：到月底了，小明的爸爸的單位發(fā)了工資總計塊大洋，拿到工資之后第一件的事情就是上交，毫無疑問的，除非小明爸爸不要命了。當小明的爸爸收到這個通知之后，心的一塊大石頭也就放下來了。下面我們正式開始我們的源碼閱讀之旅。 前言 用過react的小伙伴對redux其實并不陌生，基本大多數(shù)的React應(yīng)用用到它。一般大家用redux的時候基本都不會單獨去使用它，而是配合react-redux一起去使用...

    CloudwiseAPM 評論0 收藏0

  • 解密Redux: 從源碼開始

    摘要：接下來筆者就從源碼中探尋是如何實現(xiàn)的。其實很簡單，可以簡單理解為一個約束了特定規(guī)則并且包括了一些特殊概念的的發(fā)布訂閱器。新舊中存在的任何都將收到先前的狀態(tài)。這有效地使用來自舊狀態(tài)樹的任何相關(guān)數(shù)據(jù)填充新狀態(tài)樹。 Redux是當今比較流行的狀態(tài)管理庫，它不依賴于任何的框架，并且配合著react-redux的使用，Redux在很多公司的React項目中起到了舉足輕重的作用。接下來筆者就從源碼...

    remcarpediem 評論0 收藏0

  • redux之compose

    摘要：是狀態(tài)管理庫，與其他框架如是沒有直接關(guān)系，所以可以脫離在別的環(huán)境下使用。所以一共就五個文件需要看，這五個文件也就是暴露出去的五個。所以經(jīng)過處理過之后，函數(shù)就變成我們想要的格式了?？偨Y(jié)函數(shù)在函數(shù)式編程里很常見。 redux 是狀態(tài)管理庫，與其他框架如 react 是沒有直接關(guān)系，所以 redux 可以脫離 react 在別的環(huán)境下使用。由于沒有和react 相關(guān)邏輯耦合，所以 redux...

    huayeluoliuhen 評論0 收藏0

  • 解析 Redux 源碼

    摘要：也可以看我的博客解析源碼解析源碼是狀態(tài)容器，提供可預(yù)測化的狀態(tài)管理。作為全家桶的一份子，可謂說也是名聲響響，在年學(xué)習(xí)想必沒有多少人沒聽過吧。 也可以看我的博客 - 解析 Redux 源碼 解析 Redux 源碼 showImg(https://segmentfault.com/img/bVDU86?w=1254&h=825); TIP Redux 是 JavaScript 狀態(tài)容器，提...

    Batkid 評論0 收藏0

  • Redux 源碼拾遺

    摘要：循環(huán)還沒有結(jié)束，其中的某個對進行了添加或者刪除，都會影響到此次循環(huán)的進行，帶來不可預(yù)期的錯誤。 首先來一段 redux 結(jié)合 中間件 thunk、logger 的使用demo 了解一下應(yīng)該如何使用 const redux = require(redux) const { createStore, combineReducers, bindActionCreators, ...

    CloudwiseAPM 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<