Redux 源碼分析

環境說明

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出現的動機？

1. Web應用愈來愈複雜，須要管理的應用狀態愈來愈多；
2. 應用的狀態在何時，因爲什麼緣由，如何變化已然不受控制；
3. 咱們老是將兩個難以理清的概念混淆在一塊兒：變化和異步；

Redux核心概念？

1. Store：保存應用程序State數據的地方；
2. Action：JS普通對象，用於描述一個事件以及必要參數，是改變 State 的惟一辦法；
3. Reducer：純函數，用於根據Action完成 State 狀態的修改；
4. 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綁定在一塊兒的工具；
示例：

源碼：

createStore.js

顧名思義，建立Store用的，Redux核心模塊；

utils/actionTypes.js：

定義了2個Redux內部使用的Action常量，用於在Redux初始化或替換Reducer時完成Store初值構建；

combineReducers.js

對於Redux應用來講，只有一個Store、也只有一個Reducer；但隨着應用變得愈來愈複雜，咱們須要對 reducer 函數進行拆分，拆分後的每一塊獨立負責管理 state 的一部分；
示例：

源碼：

compose.js:

compose其實是一個函數式編程中的寫法，表示從右向左組合多個函數。compose被appliMiddleware.js內部用於組合多個middleware組件；

applyMiddleware.js:

applyMiddleware是Redux官方附帶的一個Store加強器；
回顧一下createStore的接口：

再看一個應用applyMiddleware的示例：

源碼：

最後再貼一張middleware中next與dispatch間的關係圖：

參考資料：

《深刻React技術棧》
github.com/reduxjs/red…
github.com/reduxjs/red…
github.com/evgenyrodio…

社區以及公衆號發佈的文章，100%保證是咱們的原創文章，若是有錯誤，歡迎你們指正。

文章首發在WebJ2EE公衆號上，歡迎你們關注一波，讓咱們你們一塊兒學前端~~~

再來一波號外，咱們成立WebJ2EE公衆號前端吹水羣，你們不論是看文章仍是在工做中前端方面有任何問題，咱們均可以在羣內互相探討，但願可以用咱們的經驗幫更多的小夥伴解決工做和學習上的困惑,歡迎加入。