Redux的action和reducer已经足够复杂了，现在还需要理解Redux的中间件。为什么Redux的存在有何意义？为什么Redux的中间件有这么多层的函数返回？Redux的中间件究竟是如何工作的？本文来给你解惑，Redux中间件从零到“放弃”。

本文的参考网站只有二个，首当其冲的就是Redux的官方网站，本文的思考过程大多参考官方给出的例子。还有一个就是Redux的经典中间件，可以说Redux的中间件的产生就是为了实现它——redux-thunk。

写在前面：本文其实就是我理解Redux中间件的一个思考过程，中间不免来自我个人的吐槽，大家看看乐乐就好。

我们为什么要用中间件？

我们为什么要用中间件？这个问题提的好！为了回答这个问题，我现在提出一个需求，所有的store.dispatch都要监控dispatch之前和之后的state变化。那么我们会怎做呢？So easy，直接前后都加上console.log(store.getState())就可以了不是吗？

console.log('dispatching', action) store.dispatch(getTodos({items:[]})) console.log('next state', store.getState()) console.log('dispatching', action) store.dispatch(getTodos({items:["aaa"]})) console.log('next state', store.getState())

没错，我们可以这么做。不过如果夸张点，我有成千上万的dispatch，那么console.log就要dispatch的数量*2了。然后当我们幸幸苦苦打完点，产品要上线了，我们需要把断点都关闭。这个时候难道我们要一个个去注释删除吗？

不，我不干，这样可能还会改错。那么我们将此功能独立出来试试，这样不就可以实现复用了。将公用代码写入一个方法，然后变化的参数提取出来。

function dispatchAndLog(store, action) {     console.log('dispatching', action)     store.dispatch(action)     console.log('next state', store.getState()) } dispatchAndLog(store, getTodos({items:[]})) dispatchAndLog(store, getTodos({items:["aaa"]}))

这样是不是就方便了很多，注释的话只需要注释两行，而不是随着dispatch成倍数增长。但是我觉得这样写，对于其他合作的小伙伴不友好，相当于我自己写了一套语法出来。最好还是使用官方的store.dispatch的时候，自定义函数一起执行了。

可以这样改写store.dispatch，将store.dispatch赋值给next，然后将diapatch变成我们自定义的函数，在这个自定义的函数中调用next，也就是原dispatch。这样就玩美地改写了dispatch，保留了原始功能，还添加了自定义的方法。

const next = store.dispatch store.dispatch = function dispatchAndLog(action) {   console.log('dispatching', action)   let result = next(action)   console.log('next state', store.getState())   return result }

锵锵锵~~~这个时候Redux中间件的雏形就出现了。

MiddleWare就是对dispatch方法的一个改造，一个变异。

多中间件的实现

那么假象一下，我不仅需要监控state，我可能还有其他的功能。而且与监控state的方法相互独立。也就是我需要多个中间件，那么该如何实现呢？

我们可以将每次的变异