Multiple Redux contexts
An application hosts separate Redux stores and needs components to select from a non-default store context.
Redux Toolkit · Hook
createSelectorHook
createSelectorHook creates a useSelector-compatible hook bound to a custom React context. Use the returned hook with a Provider configured with that same context to select store data in components.
How it works
createSelectorHook creates a useSelector-style hook connected to a specified React context. Components using the returned hook read from the store supplied through a Provider configured with that same context.
Syntax
createSelectorHook(context)Parameters
| Name | Type | Description |
|---|---|---|
context | React.Context | React context used to locate the Redux store supplied by a matching Provider. |
selector | (state) => selected | Selector function supplied later to the returned useSelector-compatible hook; it receives the Redux state. |
Returns
A useSelector-compatible hook bound to the supplied React context.
Key points
- It produces a hook for reading Redux state from a custom context while retaining React Redux subscription behavior.
- Pass the custom React context to createSelectorHook and export or locally assign the returned hook.
- The selector can return a state value directly or compute a value from state.
- After dispatches, the hook compares selected results by reference to decide whether the component should rerender.
- A changed selected reference forces the subscribed component to rerender.
- An unchanged selected reference avoids a rerender after the store update.
Common mistakes
- The selector receives the complete Redux state as its sole argument; pass any additional values through a closure or selector factory.
- The custom hook must use the same context that the corresponding Provider supplies; otherwise it will not access the intended store.
Example: Using a selector hook with a custom context
import React from 'react'
import { Provider } from 'react-redux'
import { createSelectorHook } from 'react-redux'
import { createStore } from 'redux'
const MyContext = React.createContext(null)
const useMySelector = createSelectorHook(MyContext)
const store = createStore((state = { count: 0 }) => state)
function Counter() {
const count = useMySelector((state) => state.count)
return <div>{count}</div>
}
export default function App() {
return (
<Provider store={store} context={MyContext}>
<Counter />
</Provider>
)
}Creates a selector hook bound to a custom React Redux context, then uses that hook inside a matching Provider.
When to use it
Isolated Redux integration
A library or feature package must expose Redux hooks without relying on the application's default React Redux context.
Consistent custom hook configuration
Custom dispatch, selector, and store hooks must all use one explicitly chosen context.
Interview questions
QWhat does createSelectorHook provide?
createSelectorHook returns a custom useSelector hook associated with a supplied React context. This is useful when an application has more than one Redux context or needs to avoid the default context.
Follow-up: How should the Provider and hook be paired? Configure the Provider with the same context passed to createSelectorHook, then call the returned hook in descendants.
QHow does the resulting hook update components?
The returned hook subscribes its component to the Redux store and invokes the selector against the store state. A changed selected result causes the component to render again, while an unchanged result does not.
Follow-up: What comparison determines updates? React Redux compares the previous and current selector results by reference, so deriving a new object on every call can cause rerenders.
QWhen would you use createSelectorHook instead of useSelector?
Use createSelectorHook when a custom React Redux context is needed. The official example creates useSelector with createSelectorHook(MyContext), alongside custom dispatch and store hooks for the same context.
Follow-up: What related hooks complete the custom-context setup? createDispatchHook and createStoreHook can be created with the same context and configured together.
Related
useSelectorcreateDispatchHookcreateStoreHookProviderReactReduxContext