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

資訊專欄INFORMATION COLUMN

純Redux原理分析

sumory / 3525人閱讀

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

前言

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

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

redux架構(gòu)

redux一共有下邊幾部分構(gòu)成：

* createStore
* combineReducers
* bindActionCreators
* applyMiddleware
* compose

其中，createStore分為如下幾部分

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

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

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

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

    dispatch({ type: ActionTypes.INIT })
action -> dispatch -> 更新store

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

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

前面提到的store還有一個方法，subscribe，這個方法會緩存?zhèn)魅氲姆椒?，便于dispatch的時候進(jìn)行回調(diào)，從而更新試圖。

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

下面說一下其他幾個點

compose

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

applyMiddleware

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

使用方法：

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

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

就是利用中間件來改變程序默認(rèn)創(chuàng)建store，dispatch對整個過程做的處理，從而達(dá)到你自己想要的目的

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

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

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

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

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

combineReducers

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

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

bindActionCreators

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

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

總結(jié)

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

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

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

相關(guān)文章

  • Redux源碼分析

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

    renweihub 評論0 收藏0

  • redux淺析

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

    galois 評論0 收藏0

  • 簡單梳理Redux的源碼與運(yùn)行機(jī)制

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

    劉東 評論0 收藏0

  • 簡單梳理Redux的源碼與運(yùn)行機(jī)制

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

    betacat 評論0 收藏0

  • Redux概念之二: Redux的三大原則

    摘要：就是應(yīng)用程序領(lǐng)域的狀態(tài)，它是類型中的模型的設(shè)計的概念，這設(shè)計是由架構(gòu)而來的，在原本的架構(gòu)中是允許多個的結(jié)構(gòu)，簡化為只有單一個。的設(shè)計中是與中的相比，它們之間有一些類似的設(shè)計。 Redux里的強(qiáng)硬規(guī)則與設(shè)計不少，大部份都會與FP(函數(shù)式程序開發(fā))、改進(jìn)原本的Flux架構(gòu)設(shè)計有關(guān)。Redux官網(wǎng)文檔上的三大基本原則，主要是因為有可能怕初學(xué)者不理解Redux中的一些限制或設(shè)計，所以先寫出來說...

    dingda 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<