createDynamicMiddleware

概觀

一個「後設 Middleware」，允許在初始化儲存體後將 Middleware 加入 dispatch 鏈。

建立執行個體

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

const dynamicMiddleware = createDynamicMiddleware()

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

提示

可以將兩個類型參數傳遞給 createDynamicMiddleware，State 和 Dispatch。

這些參數由接收 Middleware 的方法使用，以確保提供的 Middleware 與提供的類型相容。

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 勾子，傳回一個 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 使用 自訂背景執行個體，這將很有用。