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

資訊專欄INFORMATION COLUMN

redux源碼解讀－－bindActionCreators源碼解析

Cc_2011 / 1515人閱讀

摘要：源碼解析是提供的一個輔助方法，能夠讓我們以方法的形式來調(diào)用。同時，自動對應的。這個模塊的代碼十分簡單，只要大家明白了的使用，就能夠很清晰的理解這個模塊中的每一行代碼。后續(xù)的源碼解讀和測試例子可以關(guān)注源碼解讀倉庫

bindActionCreators源碼解析

bindActionCreators是redux提供的一個輔助方法，能夠讓我們以方法的形式來調(diào)用action。同時，自動dispatch對應的action。這個模塊的代碼十分簡單，只要大家明白了Function.prototype.apply的使用，就能夠很清晰的理解這個模塊中的每一行代碼。因為，這個模塊設(shè)計到的內(nèi)容有點少，所以我們就直接分析源碼。

function bindActionCreator(actionCreator, dispatch) {
  // 這個函數(shù)的主要作用就是返回一個函數(shù)，當我們調(diào)用返回的這個函數(shù)的時候，就會自動的dispatch對應的action
  // 這一塊其實可以更改成如下這種形式更好
  // return function(...args) {return dispatch(actionCreator.apply(this, args))}
  return function() { return dispatch(actionCreator.apply(this, arguments)) }
}
/**
    參數(shù)說明： 
        actionCreators: action create函數(shù)，可以是一個單函數(shù)，也可以是一個對象，這個對象的所有元素都是action create函數(shù)
        dispatch: store.dispatch方法
*/
export default function bindActionCreators(actionCreators, dispatch) {
  // 如果actionCreators是一個函數(shù)的話，就調(diào)用bindActionCreator方法對action create函數(shù)和dispatch進行綁定
  if (typeof actionCreators === "function") {
    return bindActionCreator(actionCreators, dispatch)
  }
  // actionCreators必須是函數(shù)或者對象中的一種，且不能是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"?`
    )
  }

  // 獲取所有action create函數(shù)的名字
  const keys = Object.keys(actionCreators)
  // 保存dispatch和action create函數(shù)進行綁定之后的集合
  const boundActionCreators = {}
  for (let i = 0; i < keys.length; i++) {
    const key = keys[i]
    const actionCreator = actionCreators[key]
    // 排除值不是函數(shù)的action create
    if (typeof actionCreator === "function") {
      // 進行綁定
      boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
    }
  }
  // 返回綁定之后的對象
  /**
      boundActionCreators的基本形式就是
      {
      actionCreator: function() {dispatch(actionCreator.apply(this, arguments))}
      }
  */
  return boundActionCreators
}

這就是對bindActionCreators源碼的一個整體解讀，水平有限，歡迎拍磚。后續(xù)的源碼解讀和測試例子可以關(guān)注：redux源碼解讀倉庫

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

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

相關(guān)文章

  • Redux 入坑進階 - 源碼解析

    摘要：否則的話，認為只是一個普通的，將通過也就是進一步分發(fā)。在本組件內(nèi)的應用傳遞給子組件源碼解析期待一個作為傳入，里面是如果只是傳入一個，則通過返回被綁定到的函數(shù)遍歷并通過分發(fā)綁定至將其聲明為的屬性之一接收的作為傳入。 原文鏈接：https://github.com/ecmadao/Co...轉(zhuǎn)載請注明出處 本文不涉及redux的使用方法，因此可能更適合使用過redux的玩家翻閱? 預熱...

    BothEyes1993 評論0 收藏0

  • react-redux用法及源碼解讀

    摘要：帶有內(nèi)部狀態(tài)，內(nèi)部可以使用。代表監(jiān)聽的全局，也可以說是全局的，表示該組件自身攜帶的方法。回答問題是通過應用的，將通過頂層組件傳遞到上下文環(huán)境中。所有頁面集合緩存不用每次都重新加載通過綁定用法完參考文章 react-redux把組件分為UI組件和容器組件。先看圖下圖： showImg(https://segmentfault.com/img/bVbkVBz?w=1378&h=1194);...

    Zoom 評論0 收藏0

  • redux源碼閱讀－－主模塊

    摘要：主模塊的入口模塊就是。主要就做兩件事引入個功能模塊，并掛載至同一個對象上，對外暴露。在非環(huán)境下壓縮代碼，給予警告。后續(xù)的源碼解讀和測試例子可以關(guān)注源碼解讀倉庫 主模塊 redux的入口模塊就是src/index.js。這個文件的代碼十分簡單。主要就做兩件事： 引入個功能模塊，并掛載至同一個對象上，對外暴露。 在非production環(huán)境下壓縮代碼，給予警告。 下面是模塊的源碼(只包...

    testHs 評論0 收藏0

  • 不一樣的redux源碼解讀

    摘要：這里還有一個疑問點就是的嵌套，最開始也我不明白，看了源碼才知道，這里返回的也是接受也就是一個所以可以正常嵌套。以作為參數(shù)，調(diào)用上一步返回的函數(shù)以為參數(shù)進行調(diào)用。 1、本文不涉及redux的使用方法，因此可能更適合使用過 redux 的同學閱讀2、當前redux版本為4.0.13、更多系列文章請看 Redux作為大型React應用狀態(tài)管理最常用的工具。雖然在平時的工作中很多次的用到了它...

    Salamander 評論0 收藏0

  • Redux系列源碼解讀

    摘要：源碼解讀的方法就是給我們提供了靈活的創(chuàng)建符合標準的的方法。用于分解樹，每一個對應的一個對應的子。這樣在將傳遞給時利于分解。源碼實現(xiàn)了這種將函數(shù)數(shù)組，通過的方法，實現(xiàn)層層嵌套的執(zhí)行，達到中間件的實現(xiàn)。 Redux 源碼解讀 1.redux-action createAction redux-action的createAction方法就是給我們提供了靈活的創(chuàng)建符合FSA標準的actio...

    Scliang 評論0 收藏0

發(fā)表評論

0條評論

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