redux v3.7.2原始碼詳細解讀與學習之compose

zane1發表於2019-02-02
Redux原始碼

redux是什麼、有什麼作用，解決什麼問題，如果你還不知道，請先去這裡： redux中文文件

下面的文章適合對redux有一定理解和使用經驗的人

專案github地址：github.com/wangweiange…

如果你覺得對你有幫助的話記得給我一個star 呢

說明：

  • 程式碼使用parcel自動化編譯，專案零配置，很方便簡單的搭建工程，如果你不瞭解parcel是什麼 你可以：看看parcel是什麼
  • 對redux原始碼做了詳細的解釋
  • 對每個方法建了個相應的mean檔案測試案例

執行方式：

git clone git@github.com:wangweianger/redux-source-code-learning.git

yarn install 

npm run dev

複製程式碼

redux原始碼中的index.js檔案主要是匯出createStore,combineReducers,bindActionCreators,applyMiddleware,compose 這幾方法，程式碼簡潔簡單。

下面對每個方法一個一個的解析，達到全面的掌握它們的目的，首先從compose方法開始：

compose 是redux中提供的一個工具方法，作用是從右到左來組合多個函式，並返回一個最終的函式。

文字比較枯燥，我們來用程式碼說明：

1.使用compose的寫發：

finalCreateStore = compose(
        applyMiddleware,
        devTools,
        persistState，
        createStore
    )複製程式碼

2.不使用compose的寫法如下：

finalCreateStore = applyMiddleware() 
    (   
        devTools
        ( 
            persistState
            ( 
                createStore 
            )
        )
    )複製程式碼

仔細看看上面案例的寫法額。 既然我們知道了它是做什麼的那它的實現原理又是什麼呢？我們先來看一個知識點：Array.prototype.reduce()。

如果你還不知道或者不清楚reduce方法的作用你可以前往下面的參考連結，也可以執行下面的案例程式碼。

參考連結：Array.prototype.reduce()

在自己電腦瀏覽器的console控制檯中執行下面的一段程式碼，看看結果吧：

[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array){
    console.log(previousValue)
    console.log(currentValue)
    return previousValue + currentValue;
});複製程式碼

現在我們已經十分熟悉了reduce方法的作用，現在我們來看看redux中compose.js的原始碼：

redux v3.7.2原始碼詳細解讀與學習之compose

程式碼很簡單也很簡潔，核心在runcs.reduce處，程式碼不太好理解我們es5來從寫一下：

redux v3.7.2原始碼詳細解讀與學習之compose

現在感覺是不是清晰多了呢？

接下來我們來試著推理一下面這段程式碼的執行：

compose(
        applyMiddleware,
        devTools,
        persistState,
        createStore
    )
1.第一次執行後
    a 為:
    functin(){
        return applyMiddleware(devTools(...args))
    }
    b 為:  devTools

2.第二次執行
    a 為：
    functon(){
        return  applyMiddleware(devTools(...args))( persistState(...args) )
    }
    
    b 為:  persistState

3.第三次執行
    a 為：
    functon(){
        return  applyMiddleware(devTools(...args))( persistState(...args) )( createStore(...args) )
    }
    b 為： createStore

    可以看見最終返回一個函式：    
    applyMiddleware( devTools(...args) ) (  persistState(...args) ) (  createStore(...args) )複製程式碼

正如原始碼註釋中的 (…args) => f(g(h(…args))) 你看懂了嗎？好好理解理解額。

接下來我們進入到redux的最核心方法 createStore

redux v3.7.2原始碼解讀與學習之 createStore

關注我的部落格：zane的個人部落格

原文地址：redux v3.7.2原始碼解讀與學習之compose

相關文章