redux源碼解讀--applyMiddleware源碼解析

Atom 發布于2019-08-22 13:35 / 639人閱讀

摘要：的中間件主要是通過模塊實現的。返回的也是一個對象這個其實就是，各個中間件的最底層第三層的哪個函數組成的圓環函數構成的這就是對源碼的一個整體解讀，水平有限，歡迎拍磚。后續的源碼解讀和測試例子可以關注源碼解讀倉庫

applyMiddleware源碼解析

中間件機制在redux中是強大且便捷的，利用redux的中間件我們能夠實現日志記錄，異步調用等多種十分實用的功能。redux的中間件主要是通過applyMiddleware模塊實現的。下面，我們就好好的看一下，這個模塊到底有什么神奇的魔力。

關于中間件的使用，不了解的同學還需要參考redux文檔進行學習。

在我們進行中間件源碼剖析之前，我們需要知道一件事：中間件模塊在redux的源碼中是怎么被被調用的？只有明白了這個問題，我們才能夠知道各個參數分別代表的是什么含義。

中間件的本質是作為enhancer而存在的。所以，它是通過createStore方法傳遞到redux的內部中的。在[createStore源碼分析]()中有這樣一段代碼：

if (typeof enhancer !== "undefined") {
    if (typeof enhancer !== "function") {
        throw new Error("Expected the enhancer to be a function.")
    }

    return enhancer(createStore)(reducer, preloadedState)
}

從這段代碼中，我們不難看出，中間件模塊是一個高階函數。其函數簽名可以表述如下：

const applyMiddleware = (各個中間件列表) => (createStore(創建store)) => (reducer(reducer集合), preloadedState(初始state)) => {}

明白了上面的那個問題，還有一個問題是我們需要知道的－－就是redux的中間件的形式是怎么樣的？這里，我們選擇了用于處理異步的中間件redux-thunk的源碼，為大家解釋一下。（看到代碼，只想說，臥槽臥槽臥槽）。

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === "function") {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

而在redux中我們應該怎么使用它？

createStore(reducers, applyMiddleware(thunk))

到這里，我們知道了redux是怎么使用中間件的。下面，我們就要詳細的解釋：redux的源碼內部是怎么處理中間件的。為了幫助大家更好的理解，先給大家扯點東西。redux的中間件都是遵循一定規范的。不管是官方的中間件還是我們以后需要自己寫的中間件，其函數簽名都是一定的。也就是說，中間件的基本的格式都是一樣的，接收的參數也是redux注入進去的。下面就是redux中間件的基本格式：

const reduxMiddleware = ({dispatch, getState}[簡化的store]) => (next[上一個中間件的dispatch方法]) => (action[實際派發的action對象]) => {}

到這里，我們就可以去深究redux中間件的源碼了：

export default function applyMiddleware(...middlewares) {
  // middlewares就是我們傳遞給applyMiddlewarez函數的一系列中間件函數
  return (createStore) => (...args) => {
    // createStore就是redux用于創建store的方法,args === [reducers, preloadedState]。下面這句話就是在中間件的內部，使用我們傳遞的參數創建一個store對象
    // 注：這一塊沒有傳遞enhancer,所以返回的就是我們經常使用的store對象
    const store = createStore(...args)
    // 獲取store對象的dispatch方法
    let dispatch = store.dispatch
    // 保存的是中間件函數的第二層函數
    let chain = []

    // 傳遞給中間件的第一層的函數的參數，
    const middlewareAPI = {
      getState: store.getState,
      // 重寫了dispatch方法，其實就是store.dispatch(...args)
      dispatch: (...args) => dispatch(...args)
    }

    /** 
     * 著重給大家詳細的解釋一下這一塊
     * 假設我們給applyMiddleware函數傳遞的中間件是
     * applyMiddleware(
     *      f1 => g1 => h1(...arg) => {},
     *      f2 => g2 => h2(...arg) => {}
     * )
     * 運行下面的這行代碼之后，chain中保存的內容是
     * chain = [g1 => h1(...arg) => {}, g2 => h2(...arg) => {}]
     */
    
    chain = middlewares.map(middleware => middleware(middlewareAPI))
    /**
     * 當我們把chain傳入到 compose中后，根據我們對compose的分析，
     * compose(...chain)(store.dispatch)的結果就是:
     * g1(h2(...arg)) => h1(...arg)
     * 
     * 也就是說，按照上面的這個形式，下面的dispatch和h1函數是一樣的，所以，h1的參數，就是我們需要派發的action，當我們調用dispatch的時候，其實就相當于調用h1(action)，而在h1的內部，這個action是由g1的參數
     * 也就是h2進行派發的，所以這個時候action就傳遞到了h2的內部，而h2的參數是由g2的參數，也就是實際傳入的store.dispatch進行派發的，就這樣層層傳入，層層輸出，就形成了我們強大的中間件機制。
     */
    dispatch = compose(...chain)(store.dispatch)

    // 返回的也是一個store對象
    return {
      ...store,
      // 這個dispatch其實就是，各個中間件的最底層(第三層)的哪個函數組成的圓環函數構成的
      dispatch
    }
  }
}

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

GPU云服務器云服務器 redux源碼源碼解讀 webrtc源碼解讀 webrtc fec源碼解讀

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

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

redux源碼解讀－－createStore源碼解析

摘要：源碼解析是最核心的模塊。比如，當我們需要使用中間件的時候，就會像第三個參數傳遞一個返回值是一個。后續的源碼解讀和測試例子可以關注源碼解讀倉庫 createStore源碼解析 createStore是redux最核心的模塊。這個模塊就是用于創建一個store對象，同時，對外暴露出dispatch,getState,subscribe和replaceReducer方法。(源碼中關于obse...

tianren124 2019-08-21 17:23 評論0 收藏0
Redux 入坑進階 - 源碼解析

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

BothEyes1993 2019-08-20 11:09 評論0 收藏0
redux源碼閱讀－－主模塊

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

testHs 2019-08-21 17:23 評論0 收藏0
不一樣的redux源碼解讀

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

Salamander 2019-08-26 13:34 評論0 收藏0
重讀redux源碼(二)

摘要：函數組合，科里化的串聯結合示例源碼，實現也很優雅，對于返回的，將等參數傳遞進去，然后執行，等待回調異步完成再。對于正常對象則進行下一步。前言作為前端狀態管理器，這個比較跨時代的工具庫redux有很多實現和思想值得我們思考。在深入源碼之前，我們可以相關注下一些常見問題，這樣帶著問題去看實現，也能更加清晰的了解。常見問題大概看了下主要有這么幾個： redux三大原則這個可以直接參考...

dingda 2019-05-23 13:54 評論0 收藏0