详解Redux框架之applyMiddleware

2021-02-04 10:05:36 浏览数 (1)

在使用redux的时候我们通常要给redux增加中间件,中间件的作用是用户在调用dispatch之后,其之前配置的中间件会按照配置的顺序逐一执行,对流程进行处理。

而applyMiddleware函数就是配置redux中间件的那个函数,首先看一下applyMiddleware的简化代码:

代码语言:javascript复制
export default function applyMiddleware(...middlewares) {
  return createStore => (...args) => {
    // 利用传入的createStore和reducer和创建一个store
    const store = createStore(...args)
    let dispatch = () => {
      throw new Error(
      )
    }
    const middlewareAPI = {
      getState: store.getState,
      dispatch: (...args) => dispatch(...args)
    }
    // 让每个 middleware 带着 middlewareAPI 这个参数分别执行一遍
    const chain = middlewares.map(middleware => middleware(middlewareAPI))
    // 接着 compose 将 chain 中的所有匿名函数,组装成一个新的函数,即新的 dispatch
    dispatch = compose(...chain)(store.dispatch)
    return {
      ...store,
      dispatch
    }
  }
}

阅读源码发现程序作了如下几点:

1、applyMiddleware本质是返回一个函数B,函数的参数为createStore。

2、函数B的内部首先生成了store

3、遍历中间件传入store

4、利用compose将所有传入了store的中间件进行合并串联,并传入最终的dispatch。

更新dispatch并返回。

0 人点赞