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