資訊專欄INFORMATION COLUMN
摘要：理解需要跟結(jié)合首先來(lái)看是怎樣創(chuàng)建的再來(lái)看的源碼的第三個(gè)參數(shù)就是此時(shí)會(huì)返回也就是在中間件里面去執(zhí)行了返回的是函數(shù)也就是函數(shù)然后又跑到里面作為第三個(gè)參數(shù)所以能把作為參數(shù)傳進(jìn)去一個(gè)小例子測(cè)試返回函數(shù)后是什么東西創(chuàng)建一個(gè)的方法使用中間件的增強(qiáng)器對(duì)于
理解applyMiddleware需要跟createStore結(jié)合.首先來(lái)看createStore是怎樣創(chuàng)建store的.
再來(lái)看createStore 的源碼
createStore的第三個(gè)參數(shù)enhancer就是applyMiddleware,此時(shí)createStore會(huì)返回enhancer(createStore)(reducer, preloadedState),也就是createStore在中間件里面去執(zhí)行了
applyMiddleware返回的是函數(shù)A(也就是applyMiddleware(...middlewares) =函數(shù)A,然后又跑到createStore里面作為第三個(gè)參數(shù)),所以能把createStore作為參數(shù)傳進(jìn)去
一個(gè)小例子,測(cè)試返回函數(shù)后是什么東西
import compose from "./compose"
/**
* Creates a store enhancer that applies middleware to the dispatch method
* of the Redux store. This is handy for a variety of tasks, such as expressing
* asynchronous actions in a concise manner, or logging every action payload.
*
* 創(chuàng)建一個(gè)redux store的dispatch方法使用中間件的store增強(qiáng)器. 對(duì)于不同的人任務(wù),這將會(huì)
* 非常方便,比如可以用非常簡(jiǎn)單的方式進(jìn)行異步操作,或者輸出action的payload
*
* See `redux-thunk` package as an example of the Redux middleware.
*查看`redux-thunk`包作為一個(gè)redux中間件的例子
*
* Because middleware is potentially asynchronous, this should be the first
* store enhancer in the composition chain.
*
* 因?yàn)橹虚g件默認(rèn)是異步的,這應(yīng)該是合成鏈中的第一個(gè)store增強(qiáng)器
*
* Note that each middleware will be given the `dispatch` and `getState` functions
* as named arguments.
*注意每個(gè)中間件都會(huì)以`dispatch` and `getState`方法作為參數(shù)
* @param {...Function} middlewares The middleware chain to be applied.提供的中間件
* @returns {Function} A store enhancer applying the middleware.store增強(qiáng)器應(yīng)用的中間件
*/
export default function applyMiddleware(...middlewares) {
return (createStore) => (reducer, preloadedState, enhancer) => {
const store = createStore(reducer, preloadedState, enhancer)
let dispatch = store.dispatch
let chain = []
const middlewareAPI = {
getState: store.getState,
dispatch: (action) => dispatch(action)
}
chain = middlewares.map(middleware => middleware(middlewareAPI))
dispatch = compose(...chain)(store.dispatch)
return {
...store,
dispatch
}
}
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109003.html
摘要：主模塊的入口模塊就是。主要就做兩件事引入個(gè)功能模塊，并掛載至同一個(gè)對(duì)象上，對(duì)外暴露。在非環(huán)境下壓縮代碼，給予警告。后續(xù)的源碼解讀和測(cè)試?yán)涌梢躁P(guān)注源碼解讀倉(cāng)庫(kù) 主模塊 redux的入口模塊就是src/index.js。這個(gè)文件的代碼十分簡(jiǎn)單。主要就做兩件事： 引入個(gè)功能模塊，并掛載至同一個(gè)對(duì)象上，對(duì)外暴露。 在非production環(huán)境下壓縮代碼，給予警告。 下面是模塊的源碼(只包...
摘要：循環(huán)還沒(méi)有結(jié)束，其中的某個(gè)對(duì)進(jìn)行了添加或者刪除，都會(huì)影響到此次循環(huán)的進(jìn)行，帶來(lái)不可預(yù)期的錯(cuò)誤。 首先來(lái)一段 redux 結(jié)合 中間件 thunk、logger 的使用demo 了解一下應(yīng)該如何使用 const redux = require(redux) const { createStore, combineReducers, bindActionCreators, ...
摘要：循環(huán)還沒(méi)有結(jié)束，其中的某個(gè)對(duì)進(jìn)行了添加或者刪除，都會(huì)影響到此次循環(huán)的進(jìn)行，帶來(lái)不可預(yù)期的錯(cuò)誤。 首先來(lái)一段 redux 結(jié)合 中間件 thunk、logger 的使用demo 了解一下應(yīng)該如何使用 const redux = require(redux) const { createStore, combineReducers, bindActionCreators, ...
摘要：要應(yīng)用于生成環(huán)境必須要用或者，是的進(jìn)化產(chǎn)物，優(yōu)于。我們來(lái)看一下他的源碼，從而學(xué)一些東西。里面都是一個(gè)一個(gè)的模塊，一共個(gè)模塊，都導(dǎo)出了一些的方法，比如這個(gè)號(hào)函數(shù)，一個(gè)匿名函數(shù)，然后導(dǎo)出他寫(xiě)的方法。整體架構(gòu)就是這樣的。主要用于壓縮的時(shí)候。 redux很小的一個(gè)框架，是從flux演變過(guò)來(lái)的，盡管只有775行，但是它的功能很重要。react要應(yīng)用于生成環(huán)境必須要用flux或者redux，red...
閱讀 2063·2021-10-08 10:04
閱讀 3091·2021-09-22 10:02
閱讀 2246·2019-08-30 15:56
閱讀 834·2019-08-30 15:54
閱讀 931·2019-08-30 15:54
閱讀 1288·2019-08-30 15:53
閱讀 2516·2019-08-30 11:21
閱讀 3564·2019-08-30 10:56
