Separate store contexts
An application has multiple Redux stores and needs a distinct dispatch hook for each custom context.
Redux Toolkit · Hook
createDispatchHook
Creates a useDispatch hook tied to a specified React-Redux context. Use it with a Provider configured with that same context to dispatch actions through the corresponding store.
How it works
createDispatchHook accepts an optional React-Redux context and returns a useDispatch-compatible hook tied to that context. Pair the returned hook with a Provider configured with the same context and use it inside descendant components to obtain that store's dispatch function.
Syntax
createDispatchHook(context?)Parameters
| Name | Type | Description |
|---|---|---|
context | React.Context | Optional React context used to locate the Redux store and dispatch function. |
Returns
A custom useDispatch hook bound to the supplied React context.
Key points
- The generated hook can be exported and reused across application modules.
- RTK Query's React hooks module can receive the custom dispatch hook through its hooks configuration.
- Calling the generated hook gives a reference to the store dispatch function.
Common mistakes
- The hook needs a Provider above the component tree so the Redux store is available.
- When using a custom context, pass the identical context object to both createDispatchHook and Provider.
Example: Dispatch through a custom context
import * as React from 'react'
import { Provider, createDispatchHook } from 'react-redux'
import { configureStore, createSlice } from '@reduxjs/toolkit'
const Context = React.createContext(null)
const slice = createSlice({ name: 'counter', initialState: 0, reducers: { increment: state => state + 1 } })
const store = configureStore({ reducer: slice.reducer })
const useCustomDispatch = createDispatchHook(Context)
function Counter() {
const dispatch = useCustomDispatch()
return <button onClick={() => dispatch(slice.actions.increment())}>Increment</button>
}
export function App() {
return <Provider context={Context} store={store}><Counter /></Provider>
}Creates a dispatch hook bound to a custom React context, then uses the matching Provider so the component receives the correct store dispatch.
When to use it
Custom-context integration
A library or feature uses a non-default React-Redux context and must expose matching hooks.
RTK Query customization
A customized RTK Query API needs React hooks connected to a non-default Redux context.
Interview questions
QWhat does createDispatchHook do?
createDispatchHook creates a custom useDispatch hook for a specified React context. The component calls that hook to obtain the dispatch function from the Redux store associated with the matching Provider.
Follow-up: How do you use it with RTK Query? Supply the returned hook as the useDispatch entry in reactHooksModule when building a customized API, and provide the matching selector and store hooks as required.
QHow do you connect it to a custom Redux context?
Use createDispatchHook(MyContext) to create the hook, then render a Provider with context={MyContext} and the target store. Components below that Provider call the returned hook rather than the default useDispatch.
Follow-up: What happens if the contexts differ? The hook looks in the wrong React-Redux context, so it cannot retrieve the intended store dispatch.
QWhat does the returned hook provide?
The resulting hook returns a reference to the Redux store's dispatch function. You can call that function with action creators in event callbacks or effects.
Follow-up: How can dispatch typing account for middleware? Use a pre-typed application dispatch hook based on typeof store.dispatch when middleware-specific overloads matter.
Related
createSelectorHookcreateStoreHookuseDispatchProviderreactHooksModule