通過GitHub Blame深入分析Redux原始碼

fi3ework發表於2019-02-23
GithubRedux原始碼

『 文章首發於GitHub Blog 』

說明

本文所分析的Redux版本為3.7.2

分析直接寫在了註釋裡，放在了GitHub上 —> 倉庫地址

分析程式碼時通過檢視Github blame，參考了Redux的issue及PR來分析各個函式的意圖而不僅是從程式碼層面分析函式的作用，並且分析了很多細節層面上寫法的原因，比如：

  1. dispatch: (...args) => dispatch(…args) 為什麼不只傳遞一個 action ?

  2. listener 的呼叫為什麼從 forEach 改成了 for ?

  3. 為什麼在 reducer 的呼叫過程中不允許 dispatch(action) ?

    …

水平有限，有寫的不好或不對的地方請指出，歡迎留issue交流?

檔案結構

Redux的檔案結構並不複雜，每個檔案就是一個對外匯出的函式，依賴很少，分析起來也比較容易，只要會用Redux基本上都能看懂本文。
這是Redux的目錄結構：

.
├── applyMiddleware.js       將middleware串聯起來生成一個更強大的dispatch函式，就是中介軟體的本質作用
├── bindActionCreators.js    把action creators轉成擁有同名keys的物件
├── combineReducers.js       將多個reducer組合起來，每一個reducer獨立管理自己對應的state
├── compose.js               將middleware從右向左依次呼叫，函數語言程式設計中的常用方法，被applyMiddleware呼叫
├── createStore.js           最核心功能，建立一個store，包括實現了subscribe, unsubscribe, dispatch及state的儲存
├── index.js                 對外export
└── utils                    一些小的輔助函式供其他的函式呼叫
   ├── actionTypes.js        redux內建的action，用來初始化initialState
   ├── isPlainObject.js      用來判斷是否為單純物件
   └── warning.js            報錯提示

複製程式碼

原始碼分析

直接寫在程式碼的註釋裡了，在每個函式上方也有大段的官方註釋來解釋每個函式的作用，中文翻譯可以見Redux 中文文件

推薦原始碼的閱讀順序為：

index.js -> creatStore.js -> applyMiddleware.js (compose.js) -> combineReducers.js -> bindActionCreators.js
複製程式碼

相關文章