Dispatch typed actions
A component needs to dispatch ordinary Redux actions with application-specific typing.
Redux Toolkit · Hook
useAppDispatch
useAppDispatch is a pre-typed useDispatch hook for Redux applications written in TypeScript. It exposes the store dispatch function with the middleware-aware AppDispatch type.
How it works
useAppDispatch is an application-defined pre-typed version of React-Redux's useDispatch. It is created with the store's AppDispatch type, so components obtain a dispatch function whose type includes middleware-provided capabilities such as thunk dispatching.
Syntax
export const useAppDispatch = useDispatch.withTypes<AppDispatch>()Parameters
| Name | Type | Description |
|---|---|---|
| | No runtime parameters; the hook is called with no arguments. |
Returns
The Redux store's dispatch function, typed as AppDispatch.
Key points
- Create the hook by applying the store-derived AppDispatch type through React-Redux's withTypes helper.
- AppDispatch reflects the dispatch type produced by configureStore, including thunk middleware support.
- Use the typed hook throughout application components rather than repeatedly importing the untyped dispatch hook.
- Calling the hook supplies the actual dispatch method connected to the Redux store.
- Centralizing the typed hook reduces repeated AppDispatch imports in component files.
Common mistakes
- Using plain useDispatch can leave thunk dispatches incorrectly typed; use the application-specific typed hook instead.
- The hook must use the AppDispatch type inferred from the actual store, rather than an unrelated or manually duplicated dispatch type.
Example: Create and use a typed dispatch hook
import { useDispatch, useSelector } from 'react-redux'
import type { AppDispatch, RootState } from './store'
export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
export const useAppSelector = useSelector.withTypes<RootState>()
export function AddTodo() {
const dispatch = useAppDispatch()
return (
<button onClick={() => dispatch({ type: 'todos/add', payload: 'Learn Redux' })}>
Add todo
</button>
)
}Creates a typed dispatch hook and uses it in a component to dispatch an action.
When to use it
Dispatch thunks
A component dispatches thunk functions and needs TypeScript to recognize middleware-provided dispatch overloads.
Centralize dispatch typing
A codebase wants components to share one standard typed React-Redux hook.
Interview questions
QWhat is useAppDispatch?
useAppDispatch is a pre-typed wrapper around useDispatch. It returns the store's dispatch function while applying the application's AppDispatch type, including middleware overloads.
Follow-up: Why is AppDispatch preferable to the base Dispatch type? AppDispatch is inferred from the configured store, so middleware-added behavior such as thunk dispatching is represented in the type.
QHow do you define useAppDispatch?
Define AppDispatch as typeof store.dispatch, then create the hook with useDispatch.withTypes<AppDispatch>(). Components import this hook instead of importing plain useDispatch.
Follow-up: How would you keep selector typing consistent? Create a parallel useAppSelector with useSelector.withTypes<RootState>().
QHow is the hook used inside a component?
A component calls useAppDispatch() to obtain dispatch and then passes an action or thunk to it. This lets the component dispatch store updates without directly importing the store instance.
Follow-up: What enables thunk dispatching here? The configured store's thunk middleware contributes the relevant overloads to typeof store.dispatch.
Related
useDispatchuseSelectoruseAppSelectorAppDispatchRootStateconfigureStore