`createDynamicMiddleware`

概述

一个"元中间件"，允许在存储初始化后向调度链添加中间件。

实例创建

import { createDynamicMiddleware, configureStore } from '@reduxjs/toolkit'

const dynamicMiddleware = createDynamicMiddleware()

const store = configureStore({
  reducer: {
    todos: todosReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().prepend(dynamicMiddleware.middleware),
})

提示

可以向 createDynamicMiddleware 传递两个类型参数，State 和 Dispatch。

这些参数被接收中间件的方法使用，以确保提供的中间件与提供的类型兼容。

const dynamicMiddleware = createDynamicMiddleware<State, Dispatch>()

然而，如果这些值是从存储中派生出来的（就像它们应该的那样），就会形成一个循环类型依赖。

因此，最好使用 addMiddleware，withMiddleware 和 createDispatchWithMiddlewareHook 上附加的 withTypes 帮助器。

import { createDynamicMiddleware } from '@reduxjs/toolkit/react'
import type { RootState, AppDispatch } from './store'

const dynamicMiddleware = createDynamicMiddleware()

const {
  middleware,
  addMiddleware,
  withMiddleware,
  createDispatchWithMiddlewareHook,
} = dynamicMiddleware

interface MiddlewareApiConfig {
  state: RootState
  dispatch: AppDispatch
}

export const addAppMiddleware = addMiddleware.withTypes<MiddlewareApiConfig>()

export const withAppMiddleware = withMiddleware.withTypes<MiddlewareApiConfig>()

export const createAppDispatchWithMiddlewareHook =
  createDispatchWithMiddlewareHook.withTypes<MiddlewareApiConfig>()

export default middleware

动态中间件实例

从 createDynamicMiddleware 返回的 "动态中间件实例" 是一个对象，类似于 createListenerMiddleware 生成的对象。实例对象不是实际的 Redux 中间件本身。相反，它包含中间件和一些实例方法，用于向链中添加中间件。

export type DynamicMiddlewareInstance<
  State = unknown,
  Dispatch extends ReduxDispatch<UnknownAction> = ReduxDispatch<UnknownAction>,
> = {
  middleware: DynamicMiddleware<State, Dispatch>
  addMiddleware: AddMiddleware<State, Dispatch>
  withMiddleware: WithMiddleware<State, Dispatch>
}

`middleware`

包装器中间件实例，添加到 Redux 存储。

你可以将它放在中间件链的任何位置，但请注意，你注入到此实例的所有中间件都将包含在此位置内。

`addMiddleware`

将一组中间件注入到实例中。

addMiddleware(logger, listenerMiddleware.instance)

备注

中间件通过函数引用进行比较，每个中间件只被添加到链中一次。
中间件存储在 ES6 map 中，因此在调度期间按插入顺序调用。

`withMiddleware`

接受一组中间件，并创建一个动作。当调度时，它注入中间件并返回一个版本的 dispatch，该版本被类型化以知道任何添加的扩展。

const listenerDispatch = store.dispatch(
  withMiddleware(listenerMiddleware.middleware),
)

const unsubscribe = listenerDispatch(addListener({ type, effect }))

React 集成

当从 React-specific 入口点 (@reduxjs/toolkit/react) 导入时，调用 createDynamicMiddleware 的结果将附加额外的方法。

这些依赖于已安装 react-redux。

interface ReactDynamicMiddlewareInstance<
  State = any,
  Dispatch extends ReduxDispatch<UnknownAction> = ReduxDispatch<UnknownAction>,
> extends DynamicMiddlewareInstance<State, Dispatch> {
  createDispatchWithMiddlewareHook: CreateDispatchWithMiddlewareHook<
    State,
    Dispatch
  >
  createDispatchWithMiddlewareHookFactory: (
    context?: Context<
      ReactReduxContextValue<State, ActionFromDispatch<Dispatch>>
    >,
  ) => CreateDispatchWithMiddlewareHook<State, Dispatch>
}

`createDispatchWithMiddlewareHook`

接受一组中间件，并返回一个 useDispatch 钩子，返回一个 dispatch，类型化以包含来自提供的中间件的扩展。

const useListenerDispatch = createDispatchWithMiddlewareHook(
  listenerInstance.middleware,
)

const Component = () => {
  const listenerDispatch = useListenerDispatch()
  useEffect(() => {
    const unsubscribe = listenerDispatch(addListener({ type, effect }))
    return () => unsubscribe()
  }, [dispatch])
}

警告

当调用 createDispatchWithMiddlewareHook 时，而不是当 useDispatch 钩子被使用时，中间件被注入。

`createDispatchWithMiddlewareHookFactory`

接受一个 React context 实例，并返回一个构建用于使用该 context 的 createDispatchWithMiddlewareHook。

const createDispatchWithMiddlewareHook =
  createDispatchWithMiddlewareHookFactory(context)

如果你正在使用 custom context for React Redux，这将很有用。

createDynamicMiddleware

概述​

实例创建​

动态中间件实例​

middleware​

addMiddleware​

withMiddleware​

React 集成​

createDispatchWithMiddlewareHook​

createDispatchWithMiddlewareHookFactory​