redux源碼分析之三：bindActionCreators.js

Dionysus_go 發布于2019-08-21 17:48 / 768人閱讀

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

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

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

實現上面那個效果，僅需一行代碼，也就是源碼文件中的第一個函數：

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

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

export default function bindActionCreators(actionCreators, dispatch) {
  //如果actionCreators是一個函數，則說明只有一個actionCreator，那直接調用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對應的value都轉成了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是函數的key進行轉換，其他的都過濾掉了
    if (typeof actionCreator === "function") {
      boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
    }
  }

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

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

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

云服務器 GPU云服務器 redux源碼 Redux redux-saga react-redux

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90026.html

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

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

CloudwiseAPM 2019-08-23 12:04 評論0 收藏0
解密Redux: 從源碼開始

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

remcarpediem 2019-08-23 18:40 評論0 收藏0
redux之compose

摘要：是狀態管理庫，與其他框架如是沒有直接關系，所以可以脫離在別的環境下使用。所以一共就五個文件需要看，這五個文件也就是暴露出去的五個。所以經過處理過之后，函數就變成我們想要的格式了。總結函數在函數式編程里很常見。 redux 是狀態管理庫，與其他框架如 react 是沒有直接關系，所以 redux 可以脫離 react 在別的環境下使用。由于沒有和react 相關邏輯耦合，所以 redux...

huayeluoliuhen 2019-08-23 10:28 評論0 收藏0
解析 Redux 源碼

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

Batkid 2019-08-22 12:45 評論0 收藏0
Redux 源碼拾遺

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

CloudwiseAPM 2019-08-02 16:11 評論0 收藏0