資訊專欄INFORMATION COLUMN
摘要：前言的源碼是我閱讀過的一些庫的源碼中，相對簡單的。在更新完成后，同時會更新，并依次執(zhí)行監(jiān)聽者列表。使用新的替換現(xiàn)有的，同時執(zhí)行是隨機的字符串。會為注冊監(jiān)聽器，監(jiān)聽器存儲在數(shù)組中，返回的函數(shù)則會注銷監(jiān)聽器。使用管道，將逐層的進行包裝
前言
redux的源碼是我閱讀過的一些庫的源碼中，相對簡單的。如果大家的感興趣強烈推薦大家親自閱讀一下。
本文為了方便理解拋開了一些容錯處理以及邊緣條件的判斷。
combineReducerscombineReducers是redux中內(nèi)置的工具函數(shù)，目的是將多個reducer函數(shù)合并為一個最終的reducer函數(shù)。這個最終的reducer函數(shù)可以用于createStore中作為參數(shù)。
下面兩種寫法是完全等價的。
combineReducers的實現(xiàn)非常的簡單。在A處首先對reducers對象進行遍歷，排除value值的類型不是function的value。
在B處，我們會遍歷經(jīng)過前一步過濾的reducers對象，依次的執(zhí)行reducers對象中每一個reducer函數(shù), 將返回的結(jié)果存儲在新的對象nextState中，最后返回新的對象。
createStorecreateStore, 會創(chuàng)建一個Store, 存放應(yīng)用中全部的state, 形成state樹。
另外Store會提供額外的四個方法。getState 獲取Store存儲的state樹；dispatch分發(fā)action更改Store中的state；subscribe注冊監(jiān)聽器會在dispatch時觸發(fā)；replaceReducer替換用來計算state的reducer。
createStore, 接收3個參數(shù)：
reducer，負責(zé)處理action，返回新的state樹。
preloadedState，初始的state。如果是通過combineReducers創(chuàng)建reducer，初始的preloadedState的keys必須與reducers對象保持一致。
enhancer，store增強器，enhancer是一個高階函數(shù)，返回值是一個經(jīng)過包裝的強化的store。而redux的applyMiddleware本身就是一個enhancer。
dispatchdispatch將會用來分發(fā)action, 更新currentState對象。在更新完成后，同時會更新currentListeners，并依次執(zhí)行監(jiān)聽者列表。
getState replaceReducer使用新的reducer替換現(xiàn)有的reducer，同時執(zhí)行dispatch({ type: ActionTypes.REPLACE })(ActionTypes.REPLACE是隨機的字符串)。初始化state。
subscribesubscribe會為dispatch注冊監(jiān)聽器，監(jiān)聽器存儲在nextListeners數(shù)組中，subscribe返回的函數(shù)則會注銷監(jiān)聽器。
composecompose并不是redux中的概念，而是函數(shù)式編程中概念。類似的方法在ramda等工具庫均有實現(xiàn)。
從右往左執(zhí)行函數(shù)組合（右側(cè)函數(shù)的輸出作為左側(cè)函數(shù)的輸入）。最右側(cè)函數(shù)可以是多參函數(shù)，其余函數(shù)必須是單參函數(shù)。類似a(b(c(arg)))。
middlewareredux的中間件的模型類似與koa。在next前面以及next，由外向里依次執(zhí)行。當(dāng)最里層的next執(zhí)行完成后，next后面的代碼，會由內(nèi)向外依次執(zhí)行。非常類似koa的洋蔥中間件模型。
以下是一個簡單的redux中間件的示例。
下面是redux文檔中, 為介紹中間件的原理而給出的applyMiddleware的單純的實現(xiàn)。
中間件會對dispatch進行一層包裝，并且總是會返回包裝后的dispath。下一個中間件，會基于上一個中間件返回的dispatch再次進行處理。
applyMiddleware在前面我們說過applyMiddleware是redux內(nèi)置的enhancer。我們先來回顧一下enhancer的使用方法。
在createStore中調(diào)用enhancer。參數(shù)為createStore自身，enhancer會返回一個新的函數(shù)。接收reducer, preloadedState對象作為參數(shù)。
在applyMiddleware中，利用js的閉包的特性使用createStore以及reducer, preloadedState參數(shù)創(chuàng)建store。
使用管道compose，將store.dispatch逐層的進行包裝
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/104539.html
摘要：的中間件主要是通過模塊實現(xiàn)的。返回的也是一個對象這個其實就是，各個中間件的最底層第三層的哪個函數(shù)組成的圓環(huán)函數(shù)構(gòu)成的這就是對源碼的一個整體解讀，水平有限，歡迎拍磚。后續(xù)的源碼解讀和測試例子可以關(guān)注源碼解讀倉庫 applyMiddleware源碼解析 中間件機制在redux中是強大且便捷的，利用redux的中間件我們能夠?qū)崿F(xiàn)日志記錄，異步調(diào)用等多種十分實用的功能。redux的中間件主要是...
摘要：的返回值是函數(shù)，這個函數(shù)經(jīng)調(diào)用，傳入?yún)?shù)，之后會在中間件鏈上進行傳遞，只要保證每個中間件的參數(shù)是并且將傳遞給下一個中間件。 了解了Redux原理之后，我很好奇Redux中間件是怎么運作的，于是選了最常用的redux-thunk進行源碼分析。 此次分析用的redux-thunk源碼版本是2.2.0，redux源碼版本是3.7.2。并且需要了解Redux原理 redux中間件都是由redu...
摘要：源碼解析模塊的代碼十分簡練，但是實現(xiàn)的作用卻是十分強大。只傳遞一個參數(shù)的時候，就直接把這個函數(shù)返回返回組合函數(shù)這就是對源碼的一個整體解讀，水平有限，歡迎拍磚。后續(xù)的源碼解讀和測試例子可以關(guān)注源碼解讀倉庫 compose源碼解析 compose模塊的代碼十分簡練，但是實現(xiàn)的作用卻是十分強大。redux為何稱為redux？有人說就是reduce和flux的結(jié)合體，而reduce正是comp...
摘要：源碼解析是最核心的模塊。比如，當(dāng)我們需要使用中間件的時候，就會像第三個參數(shù)傳遞一個返回值是一個。后續(xù)的源碼解讀和測試例子可以關(guān)注源碼解讀倉庫 createStore源碼解析 createStore是redux最核心的模塊。這個模塊就是用于創(chuàng)建一個store對象，同時，對外暴露出dispatch,getState,subscribe和replaceReducer方法。(源碼中關(guān)于obse...
摘要：要應(yīng)用于生成環(huán)境必須要用或者，是的進化產(chǎn)物，優(yōu)于。我們來看一下他的源碼，從而學(xué)一些東西。里面都是一個一個的模塊，一共個模塊，都導(dǎo)出了一些的方法，比如這個號函數(shù)，一個匿名函數(shù)，然后導(dǎo)出他寫的方法。整體架構(gòu)就是這樣的。主要用于壓縮的時候。 redux很小的一個框架，是從flux演變過來的，盡管只有775行，但是它的功能很重要。react要應(yīng)用于生成環(huán)境必須要用flux或者redux，red...
閱讀 1843·2021-09-22 15:25
閱讀 1357·2019-08-29 12:34
閱讀 1988·2019-08-26 13:57
閱讀 3263·2019-08-26 10:48
閱讀 1495·2019-08-26 10:45
閱讀 858·2019-08-23 18:23
閱讀 791·2019-08-23 18:01
閱讀 2005·2019-08-23 16:07
