成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

redux源碼分析

Sike / 865人閱讀

摘要：背景如今在如此復(fù)雜的前端交互和邏輯中，如果是單靠框架，，是遠(yuǎn)遠(yuǎn)不夠的，還需要一個(gè)對內(nèi)部的數(shù)據(jù)狀態(tài)進(jìn)行管理的機(jī)制才行，而對于這種數(shù)據(jù)管理機(jī)制如今較為熱門是主要有幾個(gè)，，這次主要講述的就是對源碼進(jìn)行分析。

由于這段時(shí)間一直很忙，所以本想六月初研究完redux源碼就寫一篇博客記錄一下自己的心得，但一直現(xiàn)在才空閑出來，廢話不多說了，直接說主題吧。

背景：
如今在如此復(fù)雜的前端交互和邏輯中，如果是單靠UI框架（react，vue，angular）是遠(yuǎn)遠(yuǎn)不夠的，還需要一個(gè)對內(nèi)部的數(shù)據(jù)狀態(tài)進(jìn)行管理的機(jī)制才行，而對于這種數(shù)據(jù)管理機(jī)制如今較為熱門是主要有幾個(gè)：redux，vuex，mobx；這次主要講述的就是對redux源碼進(jìn)行分析。

摘要：
redux主要分為有幾個(gè)主要的api：createStore，combineReducer，applyMiddleWare，compose；本博客就這四個(gè)api進(jìn)行較為詳細(xì)的分析和闡述，以及個(gè)人的見解；

redux原理圖：

redux結(jié)構(gòu)圖：

createStore

1）充分利用了高階函數(shù)的特點(diǎn)，因?yàn)閑nchancer本身就將一系列中間件作為applymiddlewear第一個(gè)參數(shù)，然后只要判斷enchancer是函數(shù)，就將createStore，reducer，preloadState分別傳進(jìn)去，最終返回一個(gè)對象，充分利用了applyMiddleWear和createStore這兩者的嵌套。

2）就是個(gè)人覺得createStore直接返回一個(gè)字面量對象，對于單例模式來說不太嚴(yán)謹(jǐn)，因?yàn)閱卫Ｐ途褪且惶巹?chuàng)建，多處再創(chuàng)建都是只返回第一次的實(shí)例，這和angular中的server（服務(wù)）依賴注入不太像。

3）subscribe注冊的listener不是針對于有個(gè)action的，所以多處地方注冊，只要一個(gè)dispath，不相干的listener都會執(zhí)行；

combineReducer

注意點(diǎn)：

更新一次state，相當(dāng)于遍歷了一次所有的reducer，但往往只有一個(gè)地方要改變，這造成了性能的不好：

combination(state = {}, action)中的state必須和reducers對象結(jié)構(gòu)一致，就是說createStore中的initState必須和reducers一致；

compose

export default function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }

  if (funcs.length === 1) {
    return funcs[0]
  }

  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

解析：

因?yàn)閙iddleware（簡稱MW）是一個(gè)數(shù)組，而要對store中的dispatch增強(qiáng)，必須將這些MW合成一個(gè)高階復(fù)合函數(shù)，形式為a ( b ( c ( d ( params ) ) ) )；其中MW從左到右依次嵌套，左邊的MW是右邊MW的

外層函數(shù)包；

例如：現(xiàn)有MW數(shù)組[ A, B, D]；將這些MW合成一個(gè)函數(shù)；[ A, B, D].reduce((a, b) => (...args) => a(b(...args)))的過程為：

第一次：(A, B) => (...args) => a(b(...args)) ；假設(shè)返回的結(jié)果設(shè)為fn；則 fn = (...args) => A ( B ( args ) )；

第二次：(fn, D) => (...args) => a(b(...args)) ； 假設(shè)返回的結(jié)果設(shè)為fn1；則 fn1 = (...args) => fn ( D ( args ) )；

最后返回的是 fn1 = （...args）=> A ( B ( D ( args ) ) )；

所以在applyMiddleware源碼中，就有一句是：dispatch = compose(...chain)(store.dispatch)；

則套用上面的例子，dispatch = A ( B ( D ( store.dispatch ) ) );

applyMiddleWare

總結(jié)：本博客主要是針對源碼進(jìn)行流程上的解說和一些個(gè)人研究后的開發(fā)，下篇會簡單介紹一下redux-react，特別是里面的一些坑。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97558.html

相關(guān)文章

  • redux源碼分析之三：bindActionCreators.js

    摘要：歡迎關(guān)注源碼分析系列文章源碼分析之一源碼分析之二源碼分析之三源碼分析之四源碼分析之五文件算是非常簡單的一個(gè)文件了，該文件就實(shí)現(xiàn)一個(gè)目的以前這樣觸發(fā)一個(gè)，即，現(xiàn)在變成這樣觸發(fā)一個(gè)。目的很單純，簡化某個(gè)的調(diào)用。 歡迎關(guān)注redux源碼分析系列文章：redux源碼分析之一：createStore.jsredux源碼分析之二：combineReducers.jsredux源碼分析之三：bind...

    Dionysus_go 評論0 收藏0

  • redux源碼分析之二：combineReducers.js

    摘要：歡迎關(guān)注源碼分析系列文章源碼分析之一源碼分析之二源碼分析之三源碼分析之四源碼分析之五文件對外暴露了一個(gè)函數(shù)，函數(shù)是的一個(gè)輔助性的函數(shù)，用于拆分里面的第一個(gè)參數(shù)函數(shù)。函數(shù)的返回值是一個(gè)函數(shù)，該函數(shù)是組合之后的一個(gè)標(biāo)準(zhǔn)的函數(shù)。 歡迎關(guān)注redux源碼分析系列文章：redux源碼分析之一：createStore.jsredux源碼分析之二：combineReducers.jsredux源碼分...

    big_cat 評論0 收藏0

  • redux源碼解讀--applyMiddleware源碼解析

    摘要：的中間件主要是通過模塊實(shí)現(xiàn)的。返回的也是一個(gè)對象這個(gè)其實(shí)就是，各個(gè)中間件的最底層第三層的哪個(gè)函數(shù)組成的圓環(huán)函數(shù)構(gòu)成的這就是對源碼的一個(gè)整體解讀，水平有限，歡迎拍磚。后續(xù)的源碼解讀和測試?yán)涌梢躁P(guān)注源碼解讀倉庫 applyMiddleware源碼解析 中間件機(jī)制在redux中是強(qiáng)大且便捷的，利用redux的中間件我們能夠?qū)崿F(xiàn)日志記錄，異步調(diào)用等多種十分實(shí)用的功能。redux的中間件主要是...

    Atom 評論0 收藏0

  • redux 源碼分析，實(shí)現(xiàn)一個(gè)迷你的redux

    摘要：實(shí)現(xiàn)一個(gè)先不考慮中間件，實(shí)現(xiàn)一個(gè)簡潔的實(shí)現(xiàn)是最主要的一個(gè)了，通過可以創(chuàng)建一個(gè)用來存放應(yīng)用中所有的，一個(gè)應(yīng)用只能有一個(gè)。方法是用來把每一個(gè)用方法包裹一下，因?yàn)榭赡苤皇欠祷匾粋€(gè)具有屬性的對象，只有用執(zhí)行才有意義。正好可以利用的特性實(shí)現(xiàn)這個(gè)效果。 實(shí)現(xiàn)一個(gè)redux 先不考慮中間件，實(shí)現(xiàn)一個(gè)簡潔的redux 實(shí)現(xiàn)createStore createStore是redux最主要的一個(gè)API了，...

    Ashin 評論0 收藏0

  • 【源碼解析】redux-thunk

    摘要：的返回值是函數(shù)，這個(gè)函數(shù)經(jīng)調(diào)用，傳入?yún)?shù)，之后會在中間件鏈上進(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...

    simpleapples 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<