//-----------------------------------------------------------------------------

//假設(shè) 存在一個(gè)核心操作 接收參數(shù)coreArg

//建立洋蔥模型，包裹N層中間件

//要求：

// 在核心代碼執(zhí)行執(zhí)之前必須要有序執(zhí)行中間件

// 核心代碼執(zhí)行后層層返回

// 每個(gè)中間件都能接收到coreArg

function receiveMiddleware () {

//拿到中間件隊(duì)列

let middlewareList = Array.prototype.slice.call(arguments);

//將中間件隊(duì)列改造為函數(shù)層層嵌套形式

//[a,b,c,d] => a(b(c(d(core)))) By reduce

let tiggerPip = middlewareList.reduce((a, b) => (core) => a(b(core)));

let tiggerPipWitchCoreHandler = tiggerPip(() => { console.log('我是核心操作') });

return tiggerPipWitchCoreHandler;

}

const middleware1 = (next) => (lastMDarg) => {

console.log('lm 1 start')

next(lastMDarg);

console.log('lm 1 end')

};

const middleware2 = (next) => (lastMDarg) => {

console.log('lm 2 start')

next(lastMDarg);

console.log('lm 2 end')

};

const middleware3 = (next) => (lastMDarg) => {

console.log('lm 3 start')

next(lastMDarg);

console.log('lm 3 end')

};

let dispatch = receiveMiddleware(middleware1, middleware2, middleware3);

dispatch({ type: 'fff' });

//-----------------------------------------------------------------------------

//增加異步操作

const store = {

status: {name: 'zhangsan'},

getState: () => { return this.status },

dispatch: (arg) => {console.log(`我是核心操作,參數(shù)=${arg}`)}

};

function receiveMiddleware () {

//拿到中間件隊(duì)列

let middlewareList = Array.prototype.slice.call(arguments);

let dispatch = store.dispatch;

let middlewareAPI = {

dispatch: (arg) => { dispatch(arg) },

getState: store.getState,

};

//判斷中間件數(shù)量

if (middlewareList.length === 0) { return dispatch }

//將核心操作當(dāng)作參數(shù)賦予每個(gè)中間件

middlewareList = middlewareList.map((middleware) => middleware(middlewareAPI));

//將中間件隊(duì)列改造為函數(shù)層層嵌套形式

//[a,b,c,d] => a(b(c(d(core)))) By reduce

let tiggerPip = middlewareList.reduce((a, b) => (reallyDispatch) => a(b(reallyDispatch)));

//重寫(xiě)dispatch

dispatch = tiggerPip(store.dispatch);

return dispatch;

}

const middleware1 = (middlewareAPI) => (next) => (lastMDarg) => {

console.log('lm 1 start')

next(lastMDarg);

console.log('lm 1 end')

};

const middleware2 = (middlewareAPI) => (next) => (lastMDarg) => {

console.log('lm 2 start')

next(lastMDarg);

console.log('lm 2 end')

};

const middleware3 = (middlewareAPI) => (next) => (lastMDarg) => {

console.log('lm 3 start')

next(lastMDarg);

console.log('lm 3 end')

};

const supportAsyncMiddleware = (middlewareAPI) => (next) => (lastMDarg) => {

console.log('lm supportAsyncMiddleware start')

if (typeof lastMDarg === 'function') {

lastMDarg(middlewareAPI)

} else {

next(lastMDarg);

console.log('lm supportAsyncMiddleware end')

}

};

let dispatch = receiveMiddleware(middleware1,

middleware2,

middleware3,

supportAsyncMiddleware);

let asyncFun = (middlewareAPI) => {

setTimeout(() => {

let mockGetData = 'im mock data'

middlewareAPI.dispatch(mockGetData)

console.log(middlewareAPI.getState())

}, 3000)

}

dispatch(asyncFun)

總結(jié)

以上是生活随笔為你收集整理的js reduce实现中间件_实现redux中间件-洋葱模型的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。