从0开始实现redux中间件机制

今天和大家聊一聊redux的中间件原理。

注：本文内容大部分参考redux的官网文档Middleware - Redux。如果英文好的同学可以直接阅读官网文档，写的非常好。

---

关于redux-middleware

redux中间件提供了一个切面的关注点。

我们可以很方便的利用中间件进行AOP编程，比如日志功能，埋点上报等。

这里主要是利用装饰器模式，在实际任务执行之前，动态添加before和after的逻辑。

这样就能形成一个洋葱模型

接下来我们就看下如何手动开写一个日志中间件

手动处理日志

首先我们手动处理日志，就是在执行dispatch方法前后，添加console.log

console.log('dispatching', action)
store.dispatch(action)
console.log('next state', store.getState())

抽取方法

手动处理日志有一点问题，假如我们有多处执行action的地方需要用到日志，我们不可能每一处都进行复制粘贴。

那么这时候就需要额外抽取一个方法。

function dispatchAndLog(store, action) {
   
  console.log('dispatching', action)
  store.dispatch(action)
  console.log('next state', store.getState())
}

这样我们只要对原来执行dispatch的地方替换为这个方法，就可以实现日志功能了

dispatchAndLog(store,