Dispatching synchronous actions
A button, form, or other UI event needs to update Redux state by sending a slice action.
Redux Toolkit · Hook
useDispatch
useDispatch returns the Redux store's dispatch function for use in React components. Call the returned function with actions; in TypeScript, prefer a pre-typed wrapper when middleware adds dispatch capabilities.
How it works
useDispatch returns the dispatch function belonging to the Redux store available through React-Redux. Components can call that function with actions, while TypeScript applications can create a pre-typed version so dispatch also understands thunk middleware and other store-specific middleware.
Syntax
const dispatch: Dispatch = useDispatch()Returns
The Redux store's dispatch function, typed as the standard Redux Dispatch by default.
Key points
- useDispatch gives a component the dispatch method associated with the Redux store.
- Use the returned function whenever the component needs to send an action to update Redux state.
- The basic usage assigns the hook result to a dispatch variable with the Redux Dispatch type.
- React-Redux provides withTypes so applications can make a dispatch hook with store-specific TypeScript types.
- A typical typed wrapper is named useAppDispatch and is created from AppDispatch.
Common mistakes
- In TypeScript, plain useDispatch has the base Dispatch type, so use a pre-typed hook based on the store's AppDispatch when dispatching thunks or middleware-specific actions.
- Define a typed hook in a separate hooks file rather than the store setup file, helping avoid circular import issues.
Example: Dispatching a slice action
import { useDispatch } from 'react-redux'
import { increment } from './counterSlice'
export function IncrementButton() {
const dispatch = useDispatch()
return <button onClick={() => dispatch(increment())}>Increment</button>
}The component obtains the store's dispatch function and calls it with an action creator result when the button is clicked.
When to use it
Dispatching thunks with application typing
A component starts an asynchronous workflow implemented as a thunk.
Creating a reusable typed dispatch hook
A codebase wants consistent, concise Redux hooks across TypeScript components.
Interview questions
QWhat does useDispatch return, and how is it used?
useDispatch returns a reference to the dispatch function from the Redux store. Calling the returned function with an action sends that action through the store's dispatch pipeline.
Follow-up: How should it be typed in a TypeScript app? Create a pre-typed useDispatch hook from the store's AppDispatch so thunk and middleware types are included.
QHow does useDispatch fit into a component's event handling?
Call useDispatch inside a React component to obtain dispatch, then dispatch an action creator result such as dispatch(increment()). The hook lets components dispatch actions without using connect.
Follow-up: What replaces mapDispatch when modernizing a connected component? Define callback functions in the component that call dispatch, commonly using action creators.
QWhy create a typed useDispatch hook?
The default dispatch type is the standard Redux Dispatch type. It does not include thunk or other middleware extensions, so the store-specific AppDispatch type should be applied to a typed hook.
Follow-up: What is the modern concise way to create that typed hook? Use useDispatch.withTypes<AppDispatch>() and reuse the resulting hook throughout the application.
Related
useSelectoruseStoreuseAppDispatchAppDispatchDispatchProvider