史上最全的 Redux 源碼分析

前言

用 React + Redux 已經一段時間了，記得剛開始用Redux 的時候感覺非常繞，總搞不起裏面的關係，如果大家用一段時間Redux又看了它的源碼話，對你的理解會有很大的幫助。看完後，在回來看Redux，有一種 柳暗花明又一村 的感覺 .

源碼

我分析的是用 es6 語法的源碼，大家看目錄結構，一共有 6 個問件。先說下各個文件大概功能。

• applyMiddlewar.js 使用自定義的 middleware 來擴展 Redux
• bindActionCreators.js 把 action creators 轉成擁有同名 keys 的對象,使用時可以直接調用
• combineReducers.js 一個比較大的應用，需要對 reducer 函數 進行拆分，拆分後的每一塊獨立負責管理 state 的一部分
• compose.js 從右到左來組合多個函數，函數編程中常用到
• createStore.js 創建一個 Redux Store 來放所有的state
• utils/warnimng.js 控制檯輸出一個警告，我們可以不用看

我會按每個模塊的重要性，去做分析，今天就先把 createStore .js 分享給大家.

createStore.js (每行代碼都有註釋，可以直接查看源代碼)

本來我是把源代碼都給貼出來，博客園給移除了首頁，說代碼註釋太多，這我只能 簡化一下, createStore 主要返回四個方法

• dispatch

  用於action的分發——在createStore中可以用middleware中間件對dispatch進行改造，比如當action傳入dispatch會立即觸發reducer，有些時候我們不希望它立即觸發，而是等待異步操作完成之後再觸發，這時候用redux-thunk對dispatch進行改造，以前只能傳入一個對象，改造完成後可以傳入一個函數，在這個函數裏我們手動dispatch一個action對象，這個過程是可控的，就實現了異步。

• subscribe

  監聽state的變化——這個函數在store調用dispatch時會註冊一個listener監聽state變化，當我們需要知道state是否變化時可以調用，它返回一個函數，調用這個返回的函數可以註銷監聽。 let unsubscribe = store.subscribe(() => {console.log('state發生了變化')})

• getState

  獲取store中的state——當我們用action觸發reducer改變了state時，需要再拿到新的state裏的數據。getState主要在兩個地方需要用到，一是在dispatch拿到action後,store需要用它來獲取state裏的數據，並把這個數據傳給reducer，這個過程是自動執行的，二是在我們利用subscribe監聽到state發生變化後調用它來獲取新的state數據，如果做到這一步，說明我們已經成功了。

• replaceReducer

  替換reducer，改變state修改的邏輯。

結束語

代碼已經放在 githunb 上，大家可以查看 更詳細的源碼 , 如果對你有幫助，請 Star 一下吧.