欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

再探Redux Middleware

程序员文章站 2022-04-23 08:08:03
前言 在初步了解Redux中间件演变过程之后,继续研究Redux如何将中间件结合。上次将中间件与redux硬结合在一起确实有些难看,现在就一起看看Redux如何加持中间件。 中间件执行过程 希望借助图形能帮助各位更好的理解中间件的执行情况。 redux如何加持中间件 现在是时候看看redux是如何将 ......

前言

在初步了解redux中间件演变过程之后,继续研究redux如何将中间件结合。上次将中间件与redux硬结合在一起确实有些难看,现在就一起看看redux如何加持中间件。

  • 中间件执行过程

再探Redux Middleware

希望借助图形能帮助各位更好的理解中间件的执行情况。

  • redux如何加持中间件

现在是时候看看redux是如何将中间件结合了,我们在源码中一探究竟。

* @param {function} [enhancer] the store enhancer. you may optionally specify it
 * to enhance the store with third-party capabilities such as middleware,
 * time travel, persistence, etc. the only store enhancer that ships with redux
 * is `applymiddleware()`.
 *
 * @returns {store} a redux store that lets you read the state, dispatch actions
 * and subscribe to changes.
 */
export default function createstore(reducer, preloadedstate, enhancer) {
  if (
    (typeof preloadedstate === 'function' && typeof enhancer === 'function') ||
    (typeof enhancer === 'function' && typeof arguments[3] === 'function')
  ) {
    throw new error(
      'it looks like you are passing several store enhancers to ' +
        'createstore(). this is not supported. instead, compose them ' +
        'together to a single function'
    )
  }

  if (typeof preloadedstate === 'function' && typeof enhancer === 'undefined') {
    enhancer = preloadedstate // 如果初始化state是一个函数,则认为有中间件
    preloadedstate = undefined
  }

  if (typeof enhancer !== 'undefined') {
    if (typeof enhancer !== 'function') {
      throw new error('expected the enhancer to be a function.')
    }

    return enhancer(createstore)(reducer, preloadedstate)
  }

如果createstore第二个参数是函数(第二,第三都是函数会抛异常),则redux认为第二个参数是调用applymiddleware函数的返回值(注释有说明)。

根据return enhancer(createstore)reducer, preloadedstate),说明applymiddleware返回了一个函数,该函数内还返回了一个函数。那么接下来从applymiddleware源码中一探究竟。

export default function applymiddleware(...middlewares) { // 将所有中间件存入middlewares数组
  return createstore => (...args) => { // 返回函数以createstore为参数,args即[reducer, preloadedstate]
    const store = createstore(...args) // 创建一个store
    let dispatch = () => { // 定义一个dispatch变量指向匿名函数,如果被调用则抛出异常
      throw new error(
        `dispatching while constructing your middleware is not allowed. ` +
          `other middleware would not be applied to this dispatch.`
      )
    }

    const middlewareapi = {
      getstate: store.getstate,
      dispatch: (...args) => dispatch(...args) // middlewareapi的dispatch属性指向一个匿名函数,该函数内部会执行外部dispatch变量指向的那个函数。
    }
    const chain = middlewares.map(middleware => middleware(middlewareapi)) // 执行每个中间件,顺带检查是否有中间件调用传入参数中的dispatch,如果有则抛出异常
    dispatch = compose(...chain)(store.dispatch) // 将chain展开传入compose,然后执行返回的函数,传入store.dispatch,最后将所有中间件组合成最终的中间件,并将dispatch变量指向这个中间件。
  // 由于dispatch变量的更改,它原来指向的匿名函数现在没有任何变量指向它,会被垃圾回收。
// 误区:调用middlewareapi的dispatch属性指向的函数时,内部的dispatch会指向原来抛出异常的匿名函数。这是错误的,在调用middlewareapi的dispatch属性所指向的函数时,
  // 会寻找dispatch变量,函数内部找不到就向外部作用域寻找,然后找到外部dispatch,而此时外部的dispatch指向最终的中间件,所以会调用最终的中间件。这对于理解redux-thunk非常重要。
return { ...store, dispatch // 覆盖store中dispatch变量 } } }

上面的代码中还有一点疑惑,compose函数是什么样子,那么我们再探compose。

 * @param {...function} funcs the functions to compose.
 * @returns {function} a function obtained by composing the argument functions
 * from right to left. for example, compose(f, g, h) is identical to doing
 * (...args) => f(g(h(...args))). 可以发现,和我们之前写的代码效果一模一样
 */

export default function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }

  if (funcs.length === 1) {
    return funcs[0]
  }

  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

也许你对数组的reduce方法不是很熟,上篇文章篇幅也比较饱满。那么这儿简单讲解下:

[1, 2, 3, 4].reduce((a, b) => { console.log(a, b); return a + b })
// 1 2 可以发现第一次执行,我们拿到数组的第1,2个变量
// 3 3 拿到上次返回的结果和第3个变量
// 6 4 拿到上次返回的结果和第4个变量

最后结果为10,没有打印所以看不出。当然数组存储的也可能是对象,在reduce函数执行时,拿到每个变量的副本(浅拷贝),然后根据你的代码做对应的事。在这就以上篇文章的中间

件为例,再加入logmiddleware3(和logmiddleware2类似,只是将打印的数字部分改为3而已),看看compose函数执行过程。

[logmiddleware3, logmiddleware2, logmiddleware].reduce((a, b) => (...args) => a(b(...args)))
// 假定compose函数传入的参数为store.dispatch,则有以下结果:
// (logmiddleware3, logmiddleware2) => (...args) => logmiddleware3(logmiddleware2(...args)) 这里args[0]为logmiddleware(store.dispatch)返回的中间件
// (logmiddleware3(logmiddleware2(...args)), logmiddleware) => (...args) => logmiddleware3(logmiddleware2(logmiddleware(...args))) 这里的args[0]为store.dispatch
// 最后返回(...args)=> logmiddleware3(logmiddleware2(logmiddleware(...args))) ,接着执行该函数,传入store.dispatch,也就产生了最终的中间件

现在对于redux结合过程已经有了一定的认识,是时候看看别人的中间件了,对比我们自己的中间件,也许有不同的收获。

  • redux-thunk

至此我们写的中间件都比较好理解,是时候认识下redux-thunk了。它又会有什么特别之处了,让我们一起看看源码。

function createthunkmiddleware(extraargument) { // 这里extraargument完全没用到
  return ({ dispatch, getstate }) => next => action => { // 这里的dispatch如果有疑惑,请看上面

                    
                
(0)
打赏 再探Redux Middleware 微信扫一扫

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

再探Redux Middleware
验证码: 再探Redux Middleware