createdynamicmiddleware

17 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

createDynamicMiddleware overview

createDynamicMiddleware is a meta-middleware that allows adding middleware to the dispatch chain after store initialisation.

DynamicMiddlewareInstance type structure

The DynamicMiddlewareInstance type is generic over State (defaults to unknown) and Dispatch (defaults to ReduxDispatch<UnknownAction>). It exports three properties: middleware of type DynamicMiddleware<State, Dispatch>, addMiddleware of type AddMiddleware<State, Dispatch>, and withMiddleware of type WithMiddleware<State, Dispatch>.

createDynamicMiddleware type parameters

createDynamicMiddleware accepts two optional type parameters: State and Dispatch. These are used by methods that receive middleware to ensure that the provided middleware are compatible with the types provided. However, if these values are derived from the store, a circular type dependency is formed, so it is better to use the withTypes helper instead.

createDynamicMiddleware withTypes helper usage

Use withTypes helper on addMiddleware, withMiddleware, and createDispatchWithMiddlewareHook to avoid circular type dependencies. Example: interface MiddlewareApiConfig { state: RootState; dispatch: AppDispatch }; export const addAppMiddleware = addMiddleware.withTypes<MiddlewareApiConfig>(); export const withAppMiddleware = withMiddleware.withTypes<MiddlewareApiConfig>(); export const createAppDispatchWithMiddlewareHook = createDispatchWithMiddlewareHook.withTypes<MiddlewareApiConfig>();

middleware property of DynamicMiddlewareInstance

The middleware property is the wrapper middleware instance to add to the Redux store. It can be placed anywhere in the middleware chain, but all middleware injected into this instance will be contained within this position.

addMiddleware method behavior

The addMiddleware method injects a set of middleware into the instance. Middleware are compared by function reference and each is only added to the chain once. Middleware are stored in an ES6 map and are thus called in insertion order during dispatch.

addMiddleware usage example

To inject middleware using addMiddleware: addMiddleware(logger, listenerMiddleware.instance);

withMiddleware method behavior

The withMiddleware method accepts a set of middleware and creates an action. When dispatched, it injects the middleware and returns a version of dispatch typed to be aware of any extensions added.

withMiddleware usage example

To use withMiddleware: const listenerDispatch = store.dispatch(withMiddleware(listenerMiddleware.middleware)); const unsubscribe = listenerDispatch(addListener({ type, effect }));

ReactDynamicMiddlewareInstance type structure

When imported from @reduxjs/toolkit/react, the result of createDynamicMiddleware extends DynamicMiddlewareInstance and has additional properties: createDispatchWithMiddlewareHook of type CreateDispatchWithMiddlewareHook<State, Dispatch> and createDispatchWithMiddlewareHookFactory which is a function accepting an optional Context parameter and returning CreateDispatchWithMiddlewareHook<State, Dispatch>.

createDispatchWithMiddlewareHook method

The createDispatchWithMiddlewareHook method accepts a set of middleware and returns a useDispatch hook returning a dispatch typed to include extensions from provided middleware. Middleware is injected when createDispatchWithMiddlewareHook is called, not when the useDispatch hook is used.

createDispatchWithMiddlewareHook usage example

To use createDispatchWithMiddlewareHook: const useListenerDispatch = createDispatchWithMiddlewareHook(listenerInstance.middleware); const Component = () => { const listenerDispatch = useListenerDispatch(); useEffect(() => { const unsubscribe = listenerDispatch(addListener({ type, effect })); return () => unsubscribe(); }, [dispatch]); };

createDispatchWithMiddlewareHookFactory method

The createDispatchWithMiddlewareHookFactory method accepts a React context instance and returns a createDispatchWithMiddlewareHook built to use that context. This is useful if you are using a custom context for React Redux.

createDispatchWithMiddlewareHookFactory usage example

To use createDispatchWithMiddlewareHookFactory: const createDispatchWithMiddlewareHook = createDispatchWithMiddlewareHookFactory(context);

React integration dependency

The React integration features of createDynamicMiddleware depend on having react-redux installed and are only available when imported from the React-specific entry point @reduxjs/toolkit/react.

createDynamicMiddleware for runtime middleware management

Redux Toolkit 2.0 includes a new createDynamicMiddleware API that allows adding middleware at runtime after store creation. Add the dynamic middleware to the store using middleware configuration, then call dynamicMiddleware.addMiddleware() to add more middleware later. This enables code-splitting and dynamic feature loading scenarios.

createDynamicMiddleware example

Example of using createDynamicMiddleware: import { createDynamicMiddleware, configureStore } from '@reduxjs/toolkit' const dynamicMiddleware = createDynamicMiddleware() const store = configureStore({ reducer: { todos: todosReducer }, middleware: (getDefaultMiddleware) => getDefaultMiddleware().prepend(dynamicMiddleware.middleware), }) // Later at runtime dynamicMiddleware.addMiddleware(someOtherMiddleware)

Give your agent this brain