redux中间件原理

最新推荐文章于 2022-06-08 23:19:19 发布

MrWangJustToDo

最新推荐文章于 2022-06-08 23:19:19 发布

阅读量187

点赞数

分类专栏： JavaScript 文章标签： javascript reactjs

本文链接：https://blog.csdn.net/MrWangJustToDo/article/details/108468078

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文探讨了Redux中间件的实现原理，从增强store的dispatch方法开始，逐步介绍如何为dispatch添加多个功能，避免在每个函数中替换dispatch，以及如何通过参数直接传入新的dispatch函数，以此实现对Redux应用的扩展和定制。

摘要由CSDN通过智能技术生成

redux中间件实现原理

1.开始 --> 增强store的dispath方法,使用额外的方法将原始方法进行替换

    let dispath = store.dispath;
    function log(action) {
      console.log('....')
      let re = dispath(action);
      console.log('....');
      return re;
    }
    store.dispath = log;

2.继续 --> 对dispath增加超过一个的功能

  function run1(store) {
    let dispath = store.dispath;
    store.dispath = function log (action) {
      console.log('...')
      let re = dispath(action);
      console.log('....')
      return re;
    }
  }

  function run2(store) {
    let dispath = store.dispath;
    store.dispath = function get (action) {
      console.log('...')
      let re = dispath(action);
      console.log('....')
      return re;
    }
  }

  run1(store)
  run2(store)

3.然后 --> 不在每一个函数中替换dispath函数,而是直接返回新的dispath,再将store的原始dispath进行统一替换

  function run1(store) {
    let dispath = store.dispath;
    return function log (action) {
      console.log('...')
      let re = dispath(action);
      console.log('....')
      return re;
    }
  }

  function run2(store) {
    let dispath = store.dispath;
    return function get (action) {
      console.log('...')
      let re = dispath(action);
      console.log('....')
      return re;
    }
  }

  // 在redux内部进行转换
  function applyMiddlewareByMonkeypatching(store, middlewares) {
    middlewares = middlewares.slice()
    middlewares.reverse()

    middlewares.forEach(middleware =>
      store.dispatch = middleware(store)
    )
  }

4.最后 --> 每一个中间件不是通过store获取dispath函数,而是直接通过参数传入行一个middleware返回的新的函数

  function run1(store) {
    // 上一个中间价转换后并返回的dispath
    return function(next) {
      return function log (action) {
        console.log('...')
        let re = next(action);
        console.log('....')
        return re;
      }
    }
  }

  //在redux内部进行转换
  function applyMiddleware(store, middlewares) {
    middlewares = middlewares.slice()
    middlewares.reverse()
    
    // 使用reduce进行中间件的dispath转换
    store.dispath = middlewares.reduce((pre, current) => current(store)(pre), store.dispath)
  }