最近在阅读redux的源码，觉得十分的精妙，但是也看出了自己对Typescript的理解还不到位
其中中间件部分的代码，第一次让我感觉到了心灵的冲击，原来代码可以这么的精巧绝伦
以前自己封装过一个简单的请求方法，中间件的实现就low的不谈了，创建一个前置中间件的数组，再创建一个后置中间件的数组，请求前遍历掉用前置数组，请求后遍历掉用后置数组，真的捞的淌口水
redux的中间件实现
先来看看源码，为了看上去直观一点，我把ts的类型给去掉了
// 组合中间件函数的工具函数
// 把单参数函数从右到左嵌套调用
export default function compose(...funcs) {
if (funcs.length === 0) {
// infer the argument type so it is usable in inference down the line
return arg => arg;
}
if (funcs.length === 1) {
return funcs[0];
}
return funcs.reduce((a, b) => (...args) => a(b(...args)));
}
export default function applyMiddleware(...middlewares) {
return createStore => (reducer, ...args) => {
// 这里接管了store的创建
const store = createStore(reducer, ...args);
// 这里做一个错误处理
// 如果在绑定中间件的时候调用dispatch会报错
let dispatch = () => {
throw new Error(
"Dispatching while constructing your middleware is not allowed. " +
"Other middleware would not be applied to this dispatch."
);
};
const middlewareAPI = {
getState: store.getState,
dispatch: (action, ...args) => dispatch(action, ...args)
};
// 将dispatch和getStore方法传入中间件，得到新的数组
const chain = middlewares.map(middleware => middleware(middlewareAPI));
// 将新的数组用compose绑定起来，再把store.dispatch传入，得到新的dispatch
dispatch = compose(...chain)(store.dispatch);
// 返回新的dispatch，这个dispatch会触发中间件
return {
...store,
dispatch
};
};
}这个applyMiddleware函数接受不定参数的函数作为参数，返回一个新的函数，这个新的函数会接受createStore函数作为参数
使用了applyMiddleware函数后，redux的createStore创建store就移交给applyMiddleware函数处理了
中间件函数接受的参数是dispatch和getState函数，并且返回一个新的函数
来看看中间件函数应该怎么写
const doNothingMiddleware = middlewareApi => next => action =>
next(action);这里的middlewareApi就是下面这段传入的dispatch函数和getState函数
const chain = middlewares.map(middleware => middleware(middlewareAPI));这里对所有中间件传了dispatch和getState，中间件返回的新函数里，可以闭包使用这两个函数
其实中间件的实现，只用了一行代码
dispatch = compose(...chain)(store.dispatch);重点就在于这个compose函数
compose函数
export default function compose(...funcs) {
if (funcs.length === 0) {
// infer the argument type so it is usable in inference down the line
return (arg) => arg;
}
if (funcs.length === 1) {
return funcs[0];
}
return funcs.reduce((a, b) => (...args) => a(b(...args)));
}
这个函数作用简单来讲，就是把单参数函数从右到左嵌套调用
举个例子
const a = str => str + "A";
const b = str => str + "B";
const c = str => str + "C";
const composed = compose(a, b, c); // (...args)=> a(b(c(...args))
composed("args"); // => argsCBA一步一步解析，这里有3个函数，所以reduce会遍历2次
第一次
f1 = (...args) => a(b(...args))第二次
f2 = (...args) => f1(c(...args)) // 也就是 a(b(c(...args))以此类推
这只是简单的一个示例，实际上需要更复杂的例子才能理解redux是如何实现中间件的
从代码理解
先实现一个简单的中间件功能
// 组合函数，没有做参数个数的判断
const compose = (...funcs) =>
funcs.reduce((a, b) => (...args) => a(b(...args)));
// 中间件A
const middlewareA = next => action => {
console.log("before middlewareA");
console.log("middlewareA action =>", action);
next(action);
console.log("after middlewareA");
};
// 中间件B
const middlewareB = next => action => {
console.log("before middlewareB");
console.log("middlewareB action =>", action);
next(action);
console.log("after middlewareB");
};
// 处理的函数
const handle = () => {
console.log("处理中");
console.log("处理完毕");
};
// 通过compose后，具有中间件功能的函数
const dispatch = compose(middlewareA, middlewareB)(handle);
dispatch({ type: "study" });结果还是符合预期的
before middlewareA
middlewareA action => { type: 'study' }
before middlewareB
middlewareB action => { type: 'study' }
处理中
处理完毕
after middlewareB
after middlewareA其实我觉得比较难理解的地方，是在中间件函数又返回了一个新的函数这里
这个next，就是接受到的参数，next必须是一个函数，因为需要嵌套的调用
如果把示例的代码平铺开来，应该是这样的
const composedMiddlewareA = action => {
console.log("before middlewareA");
console.log("middlewareA action =>", action);
// 这里的next，其实是一个函数参数，也就是middlewareB
// 因为调用了compose后的函数，所以这里的函数已经是返回的新函数了
// next(action)
(action => {
console.log("before middlewareB");
console.log("middlewareB action =>", action);
// 调用middlewareB的next
// middlewareB的参数，就是调用组合后函数传入的参数，在这里就是handle函数
// next(action)
(() => {
console.log("处理中");
console.log("处理完毕");
})();
console.log("after middlewareB");
})(action);
console.log("after middlewareA");
};这样就一目了然了，从A函数开始，A函数接收了action参数，在调用next参数的时候，将action传入，这个next就是A函数接收的参数，也就是B函数返回的新函数，在B函数里又调用了next函数，因为只有两个中间件，所以这里的next就是handle函数
中间件的思路理清楚后，再看redux的中间件就很清楚了，它的中间件又额外接收一个参数middlewareAPI返回了个新函数，让中间件函数拥有dispatch和getState的能力
当我明白了这个原理后，我再看见redux-thunk的源码只有十行的时候，已经在预期之中了
redux-thunk的简单实现
const thunk = ({ dispatch, getState }) => next => action =>
typeof action === "function" ? action(dispatch, getState) : next(action);当action是函数的时候，将dispatch和getState传入，原理就是这么简单
不过似乎中间件还有中间件，就像composeWithDevTools(applyMiddleware(thunk, logger))这样，用了浏览器的redux-dev-tool，又对applyMiddleware中间件再来了一次中间件
redux的源码，简直是闭包的典范，几乎全是闭包，我觉得写的是相当的牛皮了，中间件的实现简直是精妙绝伦
macbook居然自己烧焦了，迷醉，不得不承认，没有mac的日子很难受，已经有点不习惯windows了……