Redux源码阅读_4

applyMiddleware.ts

函数重载声明

首先是对applyMiddleware函数的重载，重载了七个函数，主要是传入参数个数的区别。

export default function applyMiddleware(): StoreEnhancer
export default function applyMiddleware<Ext1, S>(
  middleware1: Middleware<Ext1, S, any>
): StoreEnhancer<{ dispatch: Ext1 }>
export default function applyMiddleware<Ext1, Ext2, S>(
  middleware1: Middleware<Ext1, S, any>,
  middleware2: Middleware<Ext2, S, any>
): StoreEnhancer<{ dispatch: Ext1 & Ext2 }>
export default function applyMiddleware<Ext1, Ext2, Ext3, S>(
  middleware1: Middleware<Ext1, S, any>,
  middleware2: Middleware<Ext2, S, any>,
  middleware3: Middleware<Ext3, S, any>
): StoreEnhancer<{ dispatch: Ext1 & Ext2 & Ext3 }>
export default function applyMiddleware<Ext1, Ext2, Ext3, Ext4, S>(
  middleware1: Middleware<Ext1, S, any>,
  middleware2: Middleware<Ext2, S, any>,
  middleware3: Middleware<Ext3, S, any>,
  middleware4: Middleware<Ext4, S, any>
): StoreEnhancer<{ dispatch: Ext1 & Ext2 & Ext3 & Ext4 }>
export default function applyMiddleware<Ext1, Ext2, Ext3, Ext4, Ext5, S>(
  middleware1: Middleware<Ext1, S, any>,
  middleware2: Middleware<Ext2, S, any>,
  middleware3: Middleware<Ext3, S, any>,
  middleware4: Middleware<Ext4, S, any>,
  middleware5: Middleware<Ext5, S, any>
): StoreEnhancer<{ dispatch: Ext1 & Ext2 & Ext3 & Ext4 & Ext5 }>
export default function applyMiddleware<Ext, S = any>(
  ...middlewares: Middleware<any, S, any>[]
): StoreEnhancer<{ dispatch: Ext }>

函数实现

export default function applyMiddleware(
  ...middlewares: Middleware[]
): StoreEnhancer<any> {
  return (createStore: StoreEnhancerStoreCreator) => <S, A extends AnyAction>(
    reducer: Reducer<S, A>,
    preloadedState?: PreloadedState<S>
  ) => {
    const store = createStore(reducer, preloadedState)
    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: MiddlewareAPI = {
      getState: store.getState,
      dispatch: (action, ...args) => dispatch(action, ...args)
    }
    const chain = middlewares.map(middleware => middleware(middlewareAPI))
    dispatch = compose<typeof dispatch>(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}

可以看到applyMiddleware返回一个对象，对象内容为{...store, dispatch}。

首先看看定义的两个接口 MiddlewareAPI与Middleware：

export interface MiddlewareAPI<D extends Dispatch = Dispatch, S = any> {
  dispatch: D
  getState(): S
}

export interface Middleware<
  _DispatchExt = {}, // TODO: remove unused component (breaking change)
  S = any,
  D extends Dispatch = Dispatch
> {
  (api: MiddlewareAPI<D, S>): (
    next: D
  ) => (action: D extends Dispatch<infer A> ? A : never) => any
}

可以看到，MiddlewareAPI是一个包含dispath与state属性的对象，而Middleware是一个高阶函数，将Middleware写成函数形式，其结构大致为：

function Middleware(api: ...) {
    return (next: ...) => (action: ...) {
        ...
    }
}

若在上面的结构上做出如下类型申明：

type Next<...> = (next: ...) => (action: ...) => any

则可以看做Middleware的返回值类型是个Next。

回到applyMiddleware函数代码中，带入参数看看函数内部运作。

若传入参数 middlewares = [middleware1, middleware2, middleware3]

则 chain = [next1, next2, next3]

由前文提到 compose实现（ Redux源码阅读_2）

dispatch = compose<typeof dispatch>(...chain)(store.dispatch)
=next1(next2(next3(store.dispatch)))

就是个逐层进行函数运算的操作。

后记

redux源码到这里就告一段落（还有个bindActionCreator函数实现没整理，但是平时没怎么用到就不弄了），回到最开始的问题，基本都是react-redux的内容，这个之后再去看……

只有一个可以回到的问题，action相关……

看看redux关于action的声明

export interface Action<T = any> {
  type: T
}

就是一个包含type属性的对象…… dispatch action的操作在前面关于dispatch函数的分析中也写到了……

文档上写到的基本也就是源码的所有内容，不过只看文档还是有点不知所云，结合源码还是更能理解一点。（给自己找点借口……）

最后编辑于：2020.08.10 19:32:10