史上最全的 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 一下吧.