Redux源码分析--Middleware（2）

上一部分介绍了在分析源码过程中，出现的问题，及对它的解释，如果你想了解，请进入middleware代码分析延伸问题。

这一章，主要带领你们去学习middleware的工作原理，了解了工作原理，才能更好的去使用它。

要想深入了解middleware工作原理，必须弄懂compose(...chain)(store.dispatch)这行代码。

下面我们用一个实例来说明middleware工作原理：

let m1 = ({getState, dispatch}) => (next) => (action) => {
	console.log('m1-next-before');
	next(action);
	console.log('m1-next-after');
}

let m2 = ({getState, dispatch}) => (next) => (action) => {
	console.log('m2-next-before');
	next(action);
	console.log('m2-next-after');
}

let m3 = ({getState, dispatch}) => (next) => (action) => {
	console.log('m3-next-before');
	next(action);
	console.log('m3-next-after');
}

let store = applyMiddleware(m1, m2, m3)(createStore)(reducer)

执行结果：

 上面创建了三个自定义中间件m1, m2, m3。当dispatch(action)时，m1将会执行，等执行到next(ation)时，因为这里的next是m2中的(action) => {}（如果你不理解这个，请进入Redux源码分析--Middleware（1）学习），就会去执行m2的(action) => {}，当执行到m2中的next(action)时，就会去执行下一个中间件的(action) => {}，等到最后一个中间件时，执行到next(action)时，其实是执行的dispatch(action)，这个就是去执行store.dispatch，从而获取最新的state，及处理监听事件，等dispatch执行完成之后，就会接着执行最后一个中间件内部的next(action)下面的代码，所以会输出m3-next-after，再一步一步从m3往前至m1执行，所以输出结果：m3-next-after m2-next-after m1-next-after。代码的执行，其实很像洋葱，从外到内，在到外，如下图所示