redux的中间件applyMiddleware源码

原文: redux的applyMiddleware源码

记得之前第一次看redux源码的时候是很懵逼的,尤其是看到applyMiddleware函数的时候,更是懵逼。当然那也是半年前的事情了,前几天把redux源码看了下,并且实现了个简单的redux功能。但是没有实现中间件。今天突然又想看看redux的中间件,就看了起来。

记得半年之前是从函数声明的下一行就开始看不懂了。。。然后前段时间,看了下柯里化函数,加深了高阶函数的印象,所以今天打算把中间件的源码给撸一下。

我们来看看函数声明的下一行,也就是源码第二行开始看:

export default function applyMiddleware(...middlewares) {
  return createStore => (...args) => {
    const store = createStore(...args)
    let 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)
    }
    const chain = middlewares.map(middleware => middleware(middlewareAPI))
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}

从上面我们可以看到中间件返回了函数,返回第一个函数是携带createStore参数的,这个是啥?从名字上我们就可以知道,就是createStore。不过为了证明,我们还是得从源码上来看。

还记得是怎么调用的中间件的吧,大致如下:

const store = createStore(
    reducer,
    applyMiddleware(...middlewares)
);

可以看到中间件是在createStore参数里调用的(在参数里运行函数,导致传递给createStore的是中间件运行后返回的结果,从上面的中间件源码可以知道,返回的就是携带createStore参数的函数),现在我们可以进createStore函数里看看他是怎么处理中间件返回的函数的。

redux的主要实现都是在createStore里实现的,所以我们主要看createStore里处理参数的部分:

export default function createStore(reducer, preloadedState, enhancer) {
  if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
    enhancer = preloadedState
    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)
  }

  if (typeof reducer !== 'function') {
    throw new Error('Expected the reducer to be a function.')
  }

  //other code
}

从我们调用createStore可以知道第一个参数是reducer,第二个参数就是中间件运行之后返回的携带createStore参数的函数。但是在上面的这段源码里,我们发现是preloadedState来接收这个携带createStore参数的函数,感觉不是很多,命名的'不好'。先继续往下看,wow, 是一个判断,他会判断preloadedState是不是一个函数,第三个参数enhancer是不是未定义;如果preloadedState是函数,enhancer是未定义,那么就会把preloadedState赋值给enhancer,并且设置preloadedState是未定义。 这样就没有问题了,在这里,相当于第三个参数enhancer接收了携带createStore参数的函数。

然后第二个判断:

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

  return enhancer(createStore)(reducer, preloadedState)
}

他会去运行这个enhancer。这个enhancer是什么?就是我们说的携带createStore的函数。

有意思的是,这个enhancer直接在这里运行了,并且采用了createStore作为参数(这个createStore就是函数呀)。 我们再来看看enhancer(createStore)返回的是啥:

return function (...args){
      const store = createStore(...args)
      let 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)
      }
      const chain = middlewares.map(middleware => middleware(middlewareAPI))
      dispatch = compose(...chain)(store.dispatch)

      return {
        ...store,
        dispatch
      }
    }

有意思,返回的是带有多个参数的函数。
上面的代码相当于:

enhancer(createStore) ~= function(...args) => function(reducer, preloadedState)

可以看到,上面的(...args)就是相当于(reducer, preloadedState)

那么我们再来看看上面的function(...args), 额, 直接在第一行就再次调用创建store,这样不会陷入无限循环吗?不会,因为有参数判断,在createStore的原方法里不会再执行enhancer; 所以我们可以发现,在有中间件的时候,真正的执行createStore是在中间件里去执行的,并且携带的参数是reducer, preloadedState

所以上面第一行创建了个store对象,他返回的属性有:

{
    dispatch,
    subscribe,
    getState,
    replaceReducer,
    [$$observable]: observable
  }

然后新建了个指向dispatch变量的匿名函数,这个函数在调用的时候抛出异常告诉你不可以在构造中间件时调用dispatch

Dispatching while constructing your middleware is not allowed. Other middleware would not be applied to this dispatch.

接下来会创建一个middlewareAPI对象:

const middlewareAPI = {
    getState: store.getState, //获取store里的state
    dispatch: (...args) => dispatch(...args) // 调用`dispatch`的时候会抛错,如果在组合中间件之前调用,下面会说
}

一开始我以为是在调用的时候就会报错,可是发现这个对象里的dispatch携带参数,如果只是单纯抛错,完全可以不需要传递参数,然后向下看下去才看到其中的奥妙。

然后就是对中间件集合middlewares(数组)进行操作:

const chain = middlewares.map(middleware => middleware(middlewareAPI)) //返回了新的集合,对应的每个中间件调用的结果

然后就是组合这些中间件了, 这里对高阶函数不熟的,可以看下柯里化函数和函数组合::

// china是上面返回的中间件的结果
dispatch = compose(...chain)(store.dispatch)

可以看到这个代码,组合了中间件, 使用compose这个高阶函数来处理的。我们看下这个高阶函数:

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方法组合(这个放在后面), 会有个...args参数,就是(store.dispatch),等下回说到。
    可能你对reduce不是很熟,可以简单的看下他干了什么事:
['1', 2, 3, 'n'].reduce((a, b) => console.log('a is',a , 'b is', b)) // 这样你就会发现这个方法在这里的作用

其实从注释里也可以知道:

* @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))).

把这些中间件都执行到dispatch.

再回到上面看compose的返回:

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

我们再看看中间件调用compose的地方:

dispatch = compose(...chain)(store.dispatch)

从这个地方再配合看compose(...chain) => result的这个result.

  • 第一个判断
    返回的是(arg) => arg就是相当于 result(arg) => arg, 果然,直接返回这个store.dispatch
  • 第二个判断
    返回的是唯一的一个中间件result. 然后中间件直接调用store.dispatch作为参数。
  • 最后一个
    这个返回的是一个函数,看起来像这样:
(...args) => a(b(...args))

这样就相当于result(args) => a(b(...args)),这样就保证每个中间件都会用到dispatch,并且最终返回这个被扩展过的dispatch.

然后可以看到中间件函数返回了对象:

{
  ...store,
  dispatch
}

这个dispatch就是被处理过的dispatch

你可能感兴趣的:(redux的中间件applyMiddleware源码)