Redux 原始碼分析

WebJ2EE發表於2019-05-27

環境說明

redux版本：4.0.0
redux官網：redux.js.org/
redux倉庫：github.com/reduxjs/red…
redux視訊：egghead.io/courses/get…
redux示例：redux.js.org/introductio…

redux要點回顧

Redux是什麼？

Redux 是JavaScript 應用的狀態管理容器，提供集中式、可預測的狀態管理。

Redux出現的動機？

Web應用越來越複雜，需要管理的應用狀態越來越多；
應用的狀態在什麼時候，由於什麼原因，如何變化已然不受控制；
我們總是將兩個難以理清的概念混淆在一起：變化和非同步；

Redux核心概念？

Store：儲存應用程式State資料的地方；
Action：JS普通物件，用於描述一個事件以及必要引數，是改變 State 的唯一辦法；
Reducer：純函式，用於根據Action完成 State 狀態的修改；
Middleware：Action到達Reducer前需經過的“管道”，用於Action預處理（例：非同步管理、日誌記錄）；

Redux與React的關係？

Redux是一個獨立的狀態管理容器，本身與React沒什麼關係；如果想用Redux作為React應用的狀態管理器，需要藉助react-redux元件建立Redux與React間的聯絡

redux原始碼分析

檔案整體結構分析

utils/isPlainObject.js:工具函式，判斷是否是簡單物件（通過 {} 或 new Object構造的物件）
utils/warning.js:工具函式，用於向控制檯列印警告資訊；
utils/actionTypes.js:供Redux內部使用的2個Action常量定義；
applyMiddleware.js:Redux官方附帶一個的Store增強器，用於擴充套件、增強Store的dispatch函式功能（例：日誌記錄[redux-logger]、非同步管理[redux-thunk、redux-promise、redux-saga]等...）;
compoese.js:函數語言程式設計的經典案例，用於從左到右組合函式；applyMiddleware內部使用compose串聯多個middleware元件；如果我們需要用到多個Store增強器，也需要藉助compose進行合併、串聯；
combineReducers.js:稍微複雜點的應用就不可能只寫一個Reducer，它能幫助我們將一堆小Reducer合併為一個大Reducer；
bindActionCreators.js:函數語言程式設計的又一範例，用於組合dispatch和actionCreators，看後面的例子就知道了..
createStore.js:Redux的核心了...
index.js:Redux專案入口，定義了Redux的外部介面；

index.js

index.js是redux統一匯出對外的介面的地方，包含：

createStore
combineReducers
bindActionCreators
applyMiddleware
compose
注：在index.js中統一匯出分散在各目錄中的子模組，這樣使用者無論需要用到什麼模組，只需從統一的位置import，無需記憶各子模組的實際位置；值得借鑑

utils/isPlainObject.js

判定一個JS物件是不是PlainObject；

utils/warning.js

向控制檯輸出警告資訊的工具類；

進入重頭戲之前先來看一個Redux小例子回顧一下Redux核心工作流

bindActionCreators.js

store.dispatch( actionCreator(...) )是我們向Redux傳送Action的一般方式，但這要求我們未來在傳送Action時，既要引用到store物件又要引用actionCreator，耦合度高；bindActionCreators就是把store.dispatch與actionCreator繫結在一起的工具；
示例：