Custom context store access
A component tree uses a custom React context and needs a hook that reads its Provider-managed Redux store.
Redux Toolkit · Hook
createStoreHook
createStoreHook creates a useStore-style hook bound to a specified React context. Use it when custom React-Redux hooks must read the store from a Provider configured with that context.
How it works
createStoreHook builds a useStore-style hook for a chosen React context. Components using the returned hook retrieve the Redux store supplied through a Provider configured with that same context.
Syntax
createStoreHook(context)Parameters
| Name | Type | Description |
|---|---|---|
context | React.Context<ReactReduxContextValue | null> | A React context used by the generated hook to locate the Provider's store. |
Returns
A custom useStore hook bound to the supplied React context.
Key points
- Call the factory while defining your custom hook set, passing the context that should supply the store.
- The returned hook can be assigned as the useStore implementation in a customized React-Redux hook configuration.
- A customized RTK Query createApi can receive hooks generated for a custom context.
- Custom store, dispatch, and selector hooks should be derived from the same context so they operate together.
Common mistakes
- The custom hook must use the same custom context as the corresponding Provider; otherwise it cannot access that Provider's store.
- This factory is intended for configuring custom React-Redux hooks when creating an API setup, rather than replacing the normal hooks without a context need.
Example: Read a store from a custom context
import * as React from 'react'
import { Provider, createStoreHook } from 'react-redux'
const MyContext = React.createContext(null)
const useMyStore = createStoreHook(MyContext)
const store = { getState: () => ({ count: 0 }) }
function Counter() {
const currentStore = useMyStore()
return <output>{currentStore === store ? 'connected' : 'disconnected'}</output>
}
export function App() {
return (
<Provider context={MyContext} store={store}>
<Counter />
</Provider>
)
}Creates a store hook bound to a custom React context, then reads the Provider's store from a descendant component.
When to use it
Customized RTK Query hooks
An RTK Query API must use React-Redux hooks associated with a non-default context.
Multiple isolated Redux contexts
Separate Providers or store integrations require hook factories tied to distinct contexts.
Interview questions
QWhat does createStoreHook do?
createStoreHook is a factory that returns a store-reading hook associated with a supplied React context. The returned hook lets components retrieve the store from a Provider using that context.
Follow-up: Why use it with a custom context? It allows separate React-Redux hook sets to target different stores or independently configured Providers.
QHow is createStoreHook used with a custom Provider?
Pass the custom context to createStoreHook, export the resulting hook, and configure Provider with the same context. Descendant components can then call the generated hook to obtain the Provider's store.
Follow-up: What breaks if the contexts differ? The hook looks up a different context, so it will not read the store supplied through the intended Provider.
QWhen would an application need createStoreHook?
It is useful when configuring React-Redux hooks for a custom context, including an RTK Query API created with customized React hooks. The factory is used alongside createDispatchHook and createSelectorHook.
Follow-up: How can the complete custom hook set be configured? Supply hooks created from the same context to the hooks configuration used when building the API.
Related
createDispatchHookcreateSelectorHookuseStoreProviderbuildCreateApireactHooksModule