資訊專(zhuān)欄INFORMATION COLUMN
摘要：調(diào)用鏈中最后一個(gè)會(huì)接受真實(shí)的的方法作為參數(shù)，并借此結(jié)束調(diào)用鏈?？偨Y(jié)我們常用的一般是除了和之外的方法，那個(gè)理解明白了，對(duì)于以后出現(xiàn)的問(wèn)題會(huì)有很大幫助，本文只是針對(duì)最基礎(chǔ)的進(jìn)行解析，之后有機(jī)會(huì)繼續(xù)解析對(duì)他的封裝
前言
雖然一直使用redux+react-redux，但是并沒(méi)有真正去講redux最基礎(chǔ)的部分理解透徹，我覺(jué)得理解明白redux會(huì)對(duì)react-redux有一個(gè)透徹的理解。
其實(shí)，redux并不只可以用于react的，其實(shí)他可以用于任何地方，其實(shí)他的基礎(chǔ)原理大概就是發(fā)布/訂閱模式，此處主要對(duì)redux的源碼進(jìn)行一個(gè)深入的剖析
redux架構(gòu)redux一共有下邊幾部分構(gòu)成：
* createStore * combineReducers * bindActionCreators * applyMiddleware * compose
其中，createStore分為如下幾部分
* subscribe 訂閱用于刷新頁(yè)面的回調(diào)事件 * dispatch 觸發(fā)動(dòng)作 * getState 獲取當(dāng)前狀態(tài)下的store * replaceReducer 替換初始化傳入的reducer * Observer 相關(guān)，不太理解如何使用，暫時(shí)略過(guò)store
其實(shí)，最簡(jiǎn)單的使用如下：
執(zhí)行這個(gè)方法 createStore(reducer) 則會(huì)返回暴露上面幾個(gè)方法的一個(gè)對(duì)象(賦值給store)
通過(guò)store.getState則可以獲取當(dāng)前store，此處注意，官方文檔一直再說(shuō)要在你定義的reducer當(dāng)中定義一個(gè)default，來(lái)返回默認(rèn)值，其實(shí)主要是頁(yè)面需要初始化，在createStore.js可以看出最后他調(diào)用了
dispatch({ type: ActionTypes.INIT })
action -> dispatch -> 更新store
當(dāng)dispatch調(diào)用的時(shí)候(一般會(huì)在事件的回調(diào)函數(shù)中調(diào)用)，會(huì)去執(zhí)行reducer(也就是你定義的處理函數(shù))，通過(guò)你的處理函數(shù)，最后會(huì)返回一個(gè)新的store來(lái)供你更新redux緩存的store，從這塊可以看出
try {
isDispatching = true
// 通過(guò)給reducer回傳當(dāng)前狀態(tài)和動(dòng)作狀態(tài)來(lái)更新store
currentState = currentReducer(currentState, action)
} finally {
isDispatching = false
}
render
前面提到的store還有一個(gè)方法，subscribe，這個(gè)方法會(huì)緩存?zhèn)魅氲姆椒?，便于dispatch的時(shí)候進(jìn)行回調(diào)，從而更新試圖。
其實(shí)，上面這些就是redux的原理了，具體可以看一下redux官方示例，有一個(gè)couter的例子，很容易理解: https://github.com/reactjs/re...
下面說(shuō)一下其他幾個(gè)點(diǎn)
compose簡(jiǎn)單來(lái)說(shuō)就是從右側(cè)函數(shù)的返回值，作為左側(cè)函數(shù)的參數(shù)
如 compose(fn, fn2)(...args) 等同于 fn(fn2(...args))
這個(gè)也是挺常用的一個(gè)方法
使用方法：
const store = applyMiddleware(Middle1, Middle2)(createStore)(reducer, initialState, enhancer)
這個(gè)方法主要做了一件事情
就是利用中間件來(lái)改變程序默認(rèn)創(chuàng)建store，dispatch對(duì)整個(gè)過(guò)程做的處理，從而達(dá)到你自己想要的目的
最著名的一個(gè)組件就是redux-thunk,說(shuō)這個(gè)方法前，先說(shuō)說(shuō)中間件應(yīng)該怎么寫(xiě)，官網(wǎng)有這么一段描述
每個(gè) middleware 接受 Store 的 dispatch 和 getState 函數(shù)作為命名參數(shù)，并返回一個(gè)函數(shù)。該函數(shù)會(huì)被傳入 被稱(chēng)為 next 的下一個(gè) middleware 的 dispatch 方法，并返回一個(gè)接收 action 的新函數(shù)，這個(gè)函數(shù)可以直接調(diào)用 next(action)，或者在其他需要的時(shí)刻調(diào)用，甚至根本不去調(diào)用它。調(diào)用鏈中最后一個(gè) middleware 會(huì)接受真實(shí)的 store 的 dispatch 方法作為 next 參數(shù)，并借此結(jié)束調(diào)用鏈。所以，middleware 的函數(shù)簽名是 ({ getState, dispatch }) => next => action。
下面看下redux-thunk非常簡(jiǎn)單，但是他的目的主要是為了再不引入第三方框架可以來(lái)操作異步事件，如
store.dispatch((dispatch, setState) => {
setTimeout(() => {
dispatch({
type: "EXAMPLES",
payoad: "..."
})
}, 5);
})
在redux-thunk內(nèi)部做了這么件事情，就是如果action是函數(shù)則執(zhí)行這個(gè)函數(shù)，給他傳入dispatch, getState及其他參數(shù)，如果不是，直接調(diào)用next(action)，將控制權(quán)交到下一個(gè)中間件(中間件是從左到右執(zhí)行順序，最后控制權(quán)交到store.dispatch)，其實(shí)中間件就是在dispatch觸發(fā)之前做了一些其他的事情來(lái)擴(kuò)展redux功能
combineReducers一共做了兩件事情，首先將reducer進(jìn)行檢查是否為函數(shù)，同時(shí)檢測(cè)reducer默認(rèn)傳入的store是否為undefined同時(shí)檢測(cè)是否影響到redux默認(rèn)明明空間的action type;然后就是返回一個(gè)組合reducer，里邊處理下每次有值改變的時(shí)候，執(zhí)行該函數(shù)(過(guò)程同單個(gè)reducer),內(nèi)部其實(shí)就是去循環(huán)執(zhí)行他的子reducer，子reducer根據(jù)action來(lái)進(jìn)行store的修改，所以來(lái)說(shuō)每個(gè)子reducer只要有處理相同type的函數(shù)，都會(huì)起到作用
注意：如果你的子reducer都不返回新對(duì)象，這個(gè)方法中會(huì)進(jìn)行判斷，則他也不返回新對(duì)象
bindActionCreators可以將Action Creator(也就是生成action的函數(shù))綁定到當(dāng)前函數(shù)，執(zhí)行后會(huì)生成action，然后需用dispatch(action)
沒(méi)太看懂使用場(chǎng)景，有了解的歡迎留言，互相交流學(xué)習(xí)。
總結(jié)我們常用的一般是除了bindActionCreators和compose之外的方法，那個(gè)理解明白了，對(duì)于以后出現(xiàn)的問(wèn)題會(huì)有很大幫助，本文只是針對(duì)最基礎(chǔ)的redux進(jìn)行解析，之后有機(jī)會(huì)繼續(xù)解析react-redux對(duì)他的封裝
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/94873.html
摘要：在得到新的狀態(tài)后，依次調(diào)用所有的監(jiān)聽(tīng)器，通知狀態(tài)的變更。執(zhí)行完后，獲得數(shù)組，它保存的對(duì)象是第二個(gè)箭頭函數(shù)返回的匿名函數(shù)。部分源碼利用這個(gè)屬性，所有子組件均可以拿到這個(gè)屬性。 Redux使用中的幾個(gè)點(diǎn)： Redux三大設(shè)計(jì)原則 Create Store Redux middleware combineReducer Provider與Connect Redux流程梳理 Redux設(shè)計(jì)特...
摘要：概念是一個(gè)狀態(tài)管理容器使用可以更好的管理和監(jiān)測(cè)組件之間需要通信的數(shù)據(jù)。參考源碼參考鏈接 redux概念 redux是一個(gè)狀態(tài)管理容器,使用redux可以更好的管理和監(jiān)測(cè)組件之間需要通信的數(shù)據(jù)。 redux基本原則 單一數(shù)據(jù)源 在redux中,整個(gè)應(yīng)用保持一個(gè)數(shù)據(jù)源,數(shù)據(jù)源是一個(gè)樹(shù)形的結(jié)構(gòu) 狀態(tài)只讀 狀態(tài)只讀意思是不能直接修改,需要通過(guò)dispatch action方式才可以,返回的是一...
摘要：然后循環(huán)調(diào)用中的更新函數(shù)，更新函數(shù)一般是我們的渲染函數(shù)，函數(shù)內(nèi)部會(huì)調(diào)用來(lái)獲取數(shù)據(jù)，所以頁(yè)面會(huì)更新。前言 前幾天寫(xiě)了一篇react另一個(gè)狀態(tài)管理工具Unstated的源碼解析。 開(kāi)啟了我的看源碼之路。想一想用了好長(zhǎng)時(shí)間的redux，但從沒(méi)有深究過(guò)原理，遇到報(bào)錯(cuò)更是懵逼，所以就啃了一遍它的源碼，寫(xiě)了這篇文章， 分享我對(duì)于它的理解。 API概覽 看一下redux源碼的index.js，看到了我們最...
摘要：然后循環(huán)調(diào)用中的更新函數(shù)，更新函數(shù)一般是我們的渲染函數(shù)，函數(shù)內(nèi)部會(huì)調(diào)用來(lái)獲取數(shù)據(jù)，所以頁(yè)面會(huì)更新。 歡迎訪問(wèn)個(gè)人網(wǎng)站：https://www.neroht.com/ 前言 前幾天寫(xiě)了一篇react另一個(gè)狀態(tài)管理工具Unstated的源碼解析。開(kāi)啟了我的看源碼之路。想一想用了好長(zhǎng)時(shí)間的redux，但從沒(méi)有深究過(guò)原理，遇到報(bào)錯(cuò)更是懵逼，所以就啃了一遍它的源碼，寫(xiě)了這篇文章，分享我對(duì)于它的理...
摘要：就是應(yīng)用程序領(lǐng)域的狀態(tài)，它是類(lèi)型中的模型的設(shè)計(jì)的概念，這設(shè)計(jì)是由架構(gòu)而來(lái)的，在原本的架構(gòu)中是允許多個(gè)的結(jié)構(gòu)，簡(jiǎn)化為只有單一個(gè)。的設(shè)計(jì)中是與中的相比，它們之間有一些類(lèi)似的設(shè)計(jì)。 Redux里的強(qiáng)硬規(guī)則與設(shè)計(jì)不少，大部份都會(huì)與FP(函數(shù)式程序開(kāi)發(fā))、改進(jìn)原本的Flux架構(gòu)設(shè)計(jì)有關(guān)。Redux官網(wǎng)文檔上的三大基本原則，主要是因?yàn)橛锌赡芘鲁鯇W(xué)者不理解Redux中的一些限制或設(shè)計(jì)，所以先寫(xiě)出來(lái)說(shuō)...
閱讀 2121·2023-04-26 02:19
閱讀 1914·2021-11-19 09:40
閱讀 1704·2021-09-29 09:35
閱讀 3575·2021-09-29 09:34
閱讀 4297·2021-09-07 10:16
閱讀 5530·2021-08-11 11:14
閱讀 3578·2019-08-30 15:54
閱讀 1629·2019-08-30 15:53
