简析redux技术栈（一）：redux中间件
简析redux技术栈（一）：redux中间件
一般使用了中间件的 redux 初始化是下面这样的
function configureStore(initialState) {
return {
...createStore(
reducer,
initialState,
applyMiddleware(middleware1, middleware2, middleware3)
)
};
}
const store = configureStore({});redux 中间件是一个函数，形式
const middleware1 = store => next => action => {
console.log("before", 1);
next(action);
console.log("after", 1);
};
const middleware2 = store => next => action => {
console.log("before", 2);
next(action);
console.log("after", 2);
};
const middleware3 = store => next => action => {
console.log("before", 3);
next(action);
console.log("after", 3);
};需要做到
- 保证每一个中间件内的 store 引用都是最新的，并且是同一个
- 连接起来。执行一次 dispatch，会依次执行每一个中间件
代码解释
function applyMiddleWare(...middlerWares) {
return createStore => (...args) => {
const store = createStore(...args);
let dispatch = () => {};
const middlerWareAPI = {
dispatch: action => dispatch(action),
getState: () => store.getState
};
const chain = middlerWares.map(middleWare => chain(middlerWareAPI));
dispatch = chain.reduce((f, g) => (...args) => f(g(...args)))(
store.dispatch
);
return {
...store,
dispatch
};
};
}从上面可以看到，一个中间件函数要最后完成，需要再执行前经过两次的初始化（分别传入 store 和 next 方法），然后到最后的调用
- 第一次调用。
const chain = middlerWares.map(middleWare => chain(middlerWareAPI));将store两个方法传递给中间件，所有中间件内都是同一份store
- 第二步调用也是最关键的地方，就是将所有的中间件串联起来，
dispatch一次就执行所有的中间件
// 这里其实就是compoose的实现
dispatch = chain.reduce((f, g) => (...args) => f(g(...args)))(store.dispatch);
// 等价于类似 下面的形式
dispatch = middleWare1(middleWare2(middleWare3(dispatch)));我们知道，经过第一步的初始化，对于middleWare1函数，可见next参数就是指向了middleWare2(dispatch)。只有我们的next调用了才会执行后面的中间件。而到了最后一个中间件middleWare3，它的next参数就是 redux 对应的dispatch函数了。从而最终把我们的action派发到store中去。然后调用栈依次返回。就像一个剥洋葱一样的东西。
所以如果我们把开头的 3 个中间件组合起来运行的话，
输出是
before 1
before 2
before 3
经过reducer // reducer中的log测试
after 3
after 2
after 1经过上面的代码，我们还可以发现applyMiddleWare其实也是一个高阶函数。applyMiddleware(middleware1, middleware2, middleware3)执行后，是一个接收createStore参数的函数。在createStore里面又是如何操作的。源码：
function createStore(reducer, preloadedState, enhancer) {
// .....enhancer就是上面提到的 applyMiddleware(middleware1, middleware2, middleware3)返回结果
if (typeof enhancer !== "undefined") {
return enhancer(createStore)(reducer, preloadedState);
}
// ....其实就是把原始的createStore再传进入，进行创建store。返回一个更牛逼的store，这个store其实只是重写了dispatch方法。
通过上面一堆分析，有几个结论了：
1、 中间件内部必须调用next方法。才能调用下一个中间件并且到达 action
2、中间件内部如果调用了dispatch（重写后的）。不加处理就会死循环，相当于这个洋葱剥到中间又开始剥了。
那么问题来了，dispatch什么时候用呢？
这就提到一个大名鼎鼎的库redux-thunk。它的源码里面就是使用了这个dispatch
function createThunkMiddleware(extraArgument) {
return ({ dispatch, getState }) => next => action => {
if (typeof action === "function") {
return action(dispatch, getState, extraArgument);
}
return next(action);
};
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
export default thunk;redux-thunk相信都很熟悉，一般用于处理编写异步逻辑下。它的源码更是牛逼。只有十几行。从上面可以看出它也是一个中间件，它的逻辑就是允许你dispatch一个函数，当你 dispatch 一个函数的时候，就直接执行它，并传入了dispatch（注意这个 是 dispatch 不是 前面中间件提到的 next）和getState方法
const fetchApi = (...args) => (dispatch, getState) => {
setTimeout(() => {
dispatch({ type: "xx", payload: "good" });
}, 7000);
};
dispatch(fetchApi("xxx"));通过前面的分析，传进thunk内的dispatch参数就是经过包装的dispatch，所以当我们去分发一个同步的普通action的时候，它又能经过我们的其余普通中间件逻辑的处理了
redux的applyMiddleWare函数和redux-thunk。代码很简短，却隐藏着大智慧