redux源碼分析

Sike 發(fā)布于2019-08-23 11:51 / 844人閱讀

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

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

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

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

redux原理圖：

redux結構圖：

createStore

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

2）就是個人覺得createStore直接返回一個字面量對象，對于單例模式來說不太嚴謹，因為單例模型就是一處創(chuàng)建，多處再創(chuàng)建都是只返回第一次的實例，這和angular中的server（服務）依賴注入不太像。

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

combineReducer

注意點：

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

combination(state = {}, action)中的state必須和reducers對象結構一致，就是說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)))
}

解析：

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

外層函數(shù)包；

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

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

第二次：(fn, D) => (...args) => a(b(...args)) ；假設返回的結果設為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

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

GPU云服務器云服務器 redux源碼 Redux redux-saga react-redux

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

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

redux源碼分析之三：bindActionCreators.js

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

Dionysus_go 2019-08-21 17:48 評論0 收藏0
redux源碼分析之二：combineReducers.js

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

big_cat 2019-08-21 17:03 評論0 收藏0
redux源碼解讀--applyMiddleware源碼解析

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

Atom 2019-08-22 13:35 評論0 收藏0
redux 源碼分析，實現(xiàn)一個迷你的redux

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

Ashin 2019-08-26 13:37 評論0 收藏0
【源碼解析】redux-thunk

摘要：的返回值是函數(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...

simpleapples 2019-08-21 17:10 評論0 收藏0