純Redux原理分析

sumory 發布于2019-08-22 17:07 / 3512人閱讀

摘要：調用鏈中最后一個會接受真實的的方法作為參數，并借此結束調用鏈。總結我們常用的一般是除了和之外的方法，那個理解明白了，對于以后出現的問題會有很大幫助，本文只是針對最基礎的進行解析，之后有機會繼續解析對他的封裝

前言

雖然一直使用redux+react-redux，但是并沒有真正去講redux最基礎的部分理解透徹，我覺得理解明白redux會對react-redux有一個透徹的理解。

其實，redux并不只可以用于react的，其實他可以用于任何地方，其實他的基礎原理大概就是發布/訂閱模式，此處主要對redux的源碼進行一個深入的剖析

redux架構

redux一共有下邊幾部分構成：

* createStore
* combineReducers
* bindActionCreators
* applyMiddleware
* compose

其中，createStore分為如下幾部分

* subscribe 訂閱用于刷新頁面的回調事件
* dispatch 觸發動作
* getState 獲取當前狀態下的store
* replaceReducer 替換初始化傳入的reducer
* Observer 相關，不太理解如何使用，暫時略過

store

其實，最簡單的使用如下：

執行這個方法 createStore(reducer) 則會返回暴露上面幾個方法的一個對象(賦值給store)

通過store.getState則可以獲取當前store，此處注意，官方文檔一直再說要在你定義的reducer當中定義一個default，來返回默認值，其實主要是頁面需要初始化，在createStore.js可以看出最后他調用了

    dispatch({ type: ActionTypes.INIT })

action -> dispatch -> 更新store

當dispatch調用的時候(一般會在事件的回調函數中調用)，會去執行reducer(也就是你定義的處理函數)，通過你的處理函數，最后會返回一個新的store來供你更新redux緩存的store，從這塊可以看出

    try {
      isDispatching = true
      // 通過給reducer回傳當前狀態和動作狀態來更新store
      currentState = currentReducer(currentState, action)
    } finally {
      isDispatching = false
    }

render

前面提到的store還有一個方法，subscribe，這個方法會緩存傳入的方法，便于dispatch的時候進行回調，從而更新試圖。

其實，上面這些就是redux的原理了，具體可以看一下redux官方示例，有一個couter的例子，很容易理解: https://github.com/reactjs/re...

下面說一下其他幾個點

compose

簡單來說就是從右側函數的返回值，作為左側函數的參數
如 compose(fn, fn2)(...args) 等同于 fn(fn2(...args))

applyMiddleware

這個也是挺常用的一個方法

使用方法：

const store = applyMiddleware(Middle1, Middle2)(createStore)(reducer, initialState, enhancer)

這個方法主要做了一件事情

就是利用中間件來改變程序默認創建store，dispatch對整個過程做的處理，從而達到你自己想要的目的

最著名的一個組件就是redux-thunk,說這個方法前，先說說中間件應該怎么寫，官網有這么一段描述

每個 middleware 接受 Store 的 dispatch 和 getState 函數作為命名參數，并返回一個函數。該函數會被傳入 被稱為 next 的下一個 middleware 的 dispatch 方法，并返回一個接收 action 的新函數，這個函數可以直接調用 next(action)，或者在其他需要的時刻調用，甚至根本不去調用它。調用鏈中最后一個 middleware 會接受真實的 store 的 dispatch 方法作為 next 參數，并借此結束調用鏈。所以，middleware 的函數簽名是 ({ getState, dispatch }) => next => action。

下面看下redux-thunk非常簡單，但是他的目的主要是為了再不引入第三方框架可以來操作異步事件，如

    store.dispatch((dispatch, setState) => {
        setTimeout(() => {
            dispatch({
                type: "EXAMPLES",
                payoad: "..."
            })
        }, 5);
    })

在redux-thunk內部做了這么件事情，就是如果action是函數則執行這個函數，給他傳入dispatch, getState及其他參數，如果不是，直接調用next(action)，將控制權交到下一個中間件(中間件是從左到右執行順序，最后控制權交到store.dispatch)，其實中間件就是在dispatch觸發之前做了一些其他的事情來擴展redux功能

combineReducers

一共做了兩件事情，首先將reducer進行檢查是否為函數，同時檢測reducer默認傳入的store是否為undefined同時檢測是否影響到redux默認明明空間的action type;然后就是返回一個組合reducer，里邊處理下每次有值改變的時候，執行該函數(過程同單個reducer),內部其實就是去循環執行他的子reducer，子reducer根據action來進行store的修改，所以來說每個子reducer只要有處理相同type的函數，都會起到作用

注意：如果你的子reducer都不返回新對象，這個方法中會進行判斷，則他也不返回新對象

bindActionCreators

可以將Action Creator(也就是生成action的函數)綁定到當前函數，執行后會生成action，然后需用dispatch(action)

沒太看懂使用場景，有了解的歡迎留言，互相交流學習。

總結

我們常用的一般是除了bindActionCreators和compose之外的方法，那個理解明白了，對于以后出現的問題會有很大幫助，本文只是針對最基礎的redux進行解析，之后有機會繼續解析react-redux對他的封裝

云服務器 GPU云服務器 js跨域原理分析 Redux 語音降噪圖形分析原理webrtc redux源碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/94873.html

Redux源碼分析

摘要：在得到新的狀態后，依次調用所有的監聽器，通知狀態的變更。執行完后，獲得數組，它保存的對象是第二個箭頭函數返回的匿名函數。部分源碼利用這個屬性，所有子組件均可以拿到這個屬性。 Redux使用中的幾個點： Redux三大設計原則 Create Store Redux middleware combineReducer Provider與Connect Redux流程梳理 Redux設計特...

renweihub 2019-08-22 15:26 評論0 收藏0
redux淺析

摘要：概念是一個狀態管理容器使用可以更好的管理和監測組件之間需要通信的數據。參考源碼參考鏈接 redux概念 redux是一個狀態管理容器,使用redux可以更好的管理和監測組件之間需要通信的數據。 redux基本原則單一數據源在redux中,整個應用保持一個數據源,數據源是一個樹形的結構狀態只讀狀態只讀意思是不能直接修改,需要通過dispatch action方式才可以,返回的是一...

galois 2019-08-22 16:40 評論0 收藏0
簡單梳理Redux的源碼與運行機制

摘要：然后循環調用中的更新函數，更新函數一般是我們的渲染函數，函數內部會調用來獲取數據，所以頁面會更新。前言前幾天寫了一篇react另一個狀態管理工具Unstated的源碼解析。開啟了我的看源碼之路。想一想用了好長時間的redux，但從沒有深究過原理，遇到報錯更是懵逼，所以就啃了一遍它的源碼，寫了這篇文章，分享我對于它的理解。 API概覽看一下redux源碼的index.js，看到了我們最...

劉東 2019-05-21 16:12 評論0 收藏0
簡單梳理Redux的源碼與運行機制

摘要：然后循環調用中的更新函數，更新函數一般是我們的渲染函數，函數內部會調用來獲取數據，所以頁面會更新。歡迎訪問個人網站：https://www.neroht.com/ 前言前幾天寫了一篇react另一個狀態管理工具Unstated的源碼解析。開啟了我的看源碼之路。想一想用了好長時間的redux，但從沒有深究過原理，遇到報錯更是懵逼，所以就啃了一遍它的源碼，寫了這篇文章，分享我對于它的理...

betacat 2019-08-26 13:51 評論0 收藏0
Redux概念之二: Redux的三大原則

摘要：就是應用程序領域的狀態，它是類型中的模型的設計的概念，這設計是由架構而來的，在原本的架構中是允許多個的結構，簡化為只有單一個。的設計中是與中的相比，它們之間有一些類似的設計。 Redux里的強硬規則與設計不少，大部份都會與FP(函數式程序開發)、改進原本的Flux架構設計有關。Redux官網文檔上的三大基本原則，主要是因為有可能怕初學者不理解Redux中的一些限制或設計，所以先寫出來說...

dingda 2019-08-20 13:59 評論0 收藏0