前言
因?yàn)檠芯縭edux源碼,所以學(xué)習(xí)了redux源碼使用Thunk 函數(shù)實(shí)現(xiàn)中間件處理數(shù)據(jù),并寫了個小demo和理解
demo代碼
//中間件1
function fun1(dispatch) {
return function(num) {
console.log('fun1:---前', num);
console.log('dispatch--1: ', dispatch);
dispatch(num);
console.log('fun1:---后', num);
}
}
//中間件2
function fun2(dispatch) {
return function(num) {
console.log('fun2:---前', num);
console.log('dispatch--2: ', dispatch);
dispatch(num)
console.log('fun2:---后', num);
}
}
function compose(...funcs) {
if (funcs.length === 0) {
return arg => arg
}
if (funcs.length === 1) {
return funcs[0]
}
return funcs.reduce((a, b) => (...args) => a(b(...args)))
}
var num = compose(fun1,fun2)(function(num) { console.log(num) });
num(456)
運(yùn)行結(jié)果
運(yùn)行結(jié)果
個人理解
1、 var num = compose(fun1,fun2)(function(num) { console.log(num) });
function(num) { console.log(num) }作為參數(shù)傳給fun2,然后返回的function作為參數(shù)返回給fun1,fun1返回的function賦值給num
2、num(456)
456作為參數(shù)傳給fun1返回的function,然后fun1 中的dispatch(num);會將456傳給fun2返回的function,fun2中的dispatch(num)相當(dāng)于執(zhí)行function(num) { console.log(num) },從而實(shí)現(xiàn)fun1,fun2中間件處理數(shù)據(jù)