middleware

应该如何书写一个中间件呢 ?

从上章我们可以知道applyMiddleware有以下代码

  const store = createStore(...args)
  const middlewareAPI = {
    getState: store.getState,
    dispatch: (...args) => dispatch(...args)
  }
  // 遍历执行中间件
  const chain = middlewares.map(middleware => middleware(middlewareAPI))
  dispatch = compose(...chain)(store.dispatch)
  return {
    ...store,
    // 覆盖原有store的dispatch
    dispatch
  }

通过applyMiddleware的高阶函数返回一个store，唯独这个store的dispatch方法被覆盖(装饰)了

很明显，它需要你重写一个dispatch方法，所以必须返回一个接受action的函数

const middleware = middlewareAPI=>{
  const { getState,dispatch } = middlewareAPI
  return dispatch=> { 
    return action=> { 
      // 对action做一些手脚
      // 调用传入的原生dispatch 
      console.log('中间件拦截了')
      dispatch(action)
    }
  }
}

这样一个中间件就可以写好了

按照这个顺序写这个函数就好了 middlewareAPI -> dispatch -> action

说实话，这个函数式编程确实难懂