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 地图中，因此在调度期间按插入顺序调用。

withMiddleware

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

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

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

React 集成

从 React 特定入口点 (@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 hook，该 hook 返回一个 dispatch，该 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 上下文实例，并返回一个使用该上下文的 createDispatchWithMiddlewareHook。

const createDispatchWithMiddlewareHook =
  createDispatchWithMiddlewareHookFactory(context)

如果您正在使用 自定义上下文 用于 React Redux，则此方法很有用。