redux源码二：applyMiddleware

最新推荐文章于 2022-03-05 11:04:01 发布

qq_29311189

最新推荐文章于 2022-03-05 11:04:01 发布

阅读量93

点赞数

分类专栏： react 文章标签： reactjs 前端

本文链接：https://blog.csdn.net/qq_29311189/article/details/119454013

版权

react 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细解析了Redux库中applyMiddleware函数的工作原理。它接收一系列中间件并返回一个增强器，该增强器用于修改store的dispatch方法。在创建store时，如果提供了enhancer参数，会调用这个enhancer来扩展store的功能。通过重组dispatch方法，applyMiddleware确保了中间件能够正确地被应用到store上。

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

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) // 执行传入的createStore函数
      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) // 重新组装了dispatch方法
      return {
        ...store,
        dispatch
      }
    }
}

根据源码可以看出，首先在项目中会通过执行applyMiddleware(中间件)返回一个enhancer函数。在createStore执行里会判断enhancer是否存在，如果存在执行enhancer函数。