跳到主要内容

 

createDynamicMiddleware

概述

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

实例创建

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

const dynamicMiddleware = createDynamicMiddleware()

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

可以向 createDynamicMiddleware 传递两个类型参数,StateDispatch

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

const dynamicMiddleware = createDynamicMiddleware<State, Dispatch>()

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

因此,最好使用 addMiddlewarewithMiddlewarecreateDispatchWithMiddlewareHook 上附加的 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,这将很有用。