redux源碼解析

前言

redux的源碼是我閱讀過的一些庫的源碼中，相對簡單的。若是你們的感興趣強烈推薦你們親自閱讀一下。

本文爲了方便理解拋開了一些容錯處理以及邊緣條件的判斷。

combineReducers

combineReducers是redux中內置的工具函數，目的是將多個reducer函數合併爲一個最終的reducer函數。這個最終的reducer函數能夠用於createStore中做爲參數。

下面兩種寫法是徹底等價的。

combineReducers的實現很是的簡單。在A處首先對reducers對象進行遍歷，排除value值的類型不是function的value。

在B處，咱們會遍歷通過前一步過濾的reducers對象，依次的執行reducers對象中每個reducer函數, 將返回的結果存儲在新的對象nextState中，最後返回新的對象。

createStore

createStore, 會建立一個Store, 存放應用中所有的state, 造成state樹。

另外Store會提供額外的四個方法。getState 獲取Store存儲的state樹；dispatch分發action更改Store中的state；subscribe註冊監聽器會在dispatch時觸發；replaceReducer替換用來計算state的reducer。

createStore, 接收3個參數：

• reducer，負責處理action，返回新的state樹。
• preloadedState，初始的state。若是是經過combineReducers建立reducer，初始的preloadedState的keys必須與reducers對象保持一致。
• enhancer，store加強器，enhancer是一個高階函數，返回值是一個通過包裝的強化的store。而redux的applyMiddleware自己就是一個enhancer。

dispatch

dispatch將會用來分發action, 更新currentState對象。在更新完成後，同時會更新currentListeners，並依次執行監聽者列表。

getState

replaceReducer

使用新的reducer替換現有的reducer，同時執行dispatch({ type: ActionTypes.REPLACE })(ActionTypes.REPLACE是隨機的字符串)。初始化state。

subscribe

subscribe會爲dispatch註冊監聽器，監聽器存儲在nextListeners數組中，subscribe返回的函數則會註銷監聽器。

compose

compose並非redux中的概念，而是函數式編程中概念。相似的方法在ramda等工具庫均有實現。

從右往左執行函數組合（右側函數的輸出做爲左側函數的輸入）。最右側函數能夠是多參函數，其他函數必須是單參函數。相似a(b(c(arg)))。

middleware

redux的中間件的模型相似與koa。在next前面以及next，由外向裏依次執行。當最裏層的next執行完成後，next後面的代碼，會由內向外依次執行。很是相似koa的洋蔥中間件模型。

如下是一個簡單的redux中間件的示例。

下面是redux文檔中, 爲介紹中間件的原理而給出的applyMiddleware的單純的實現。

中間件會對dispatch進行一層包裝，而且老是會返回包裝後的dispath。下一個中間件，會基於上一個中間件返回的dispatch再次進行處理。

applyMiddleware

在前面咱們說過applyMiddleware是redux內置的enhancer。咱們先來回顧一下enhancer的使用方法。

在createStore中調用enhancer。參數爲createStore自身，enhancer會返回一個新的函數。接收reducer, preloadedState對象做爲參數。

在applyMiddleware中，利用js的閉包的特性使用createStore以及reducer, preloadedState參數建立store。

使用管道compose，將store.dispatch逐層的進行包裝📦，返回的dispath會覆蓋store中dispatch。

bindActionCreators

bindActionCreators在平時工做中出鏡率不多，bindActionCreators主要用處是將dispatch方法包裝到action creator中。bindActionCreators的源碼很簡單。下面是具體實現。