Define a dispatch type that includes thunk middleware
TypeScript application setup
Redux Toolkit · Type Alias
ThunkDispatch
ThunkDispatch is a thunk-aware Redux dispatch type. It lets TypeScript accept both ordinary actions and thunk functions, whose execution can access dispatch and state through middleware.
How it works
ThunkDispatch is the dispatch type produced when thunk middleware is present. It accepts ordinary Redux actions as well as thunk functions, passing the thunk its dispatch and state-access functions and returning the thunk's result.
Syntax
ThunkDispatch<State, ExtraThunkArg, BasicAction>Parameters
| Name | Type | Description |
|---|---|---|
State | State | The Redux state type available to the thunk's getState function. |
ExtraThunkArg | ExtraThunkArg | The extra argument supplied to thunk middleware; use undefined when none is configured. |
BasicAction | BasicAction | The action type accepted by the dispatch function in addition to thunk functions. |
Returns
A dispatch function that accepts BasicAction values or thunk functions and returns the dispatched action or thunk result, depending on middleware handling.
Key points
- A thunk dispatch is handled by middleware, which invokes the function with dispatch and getState rather than sending it through reducers as an action.
- Redux Toolkit stores are thunk-enabled by default when created with configureStore.
- Core Dispatch is insufficient for thunk calls; use a middleware-aware dispatch type.
- The recommended application pattern is to infer AppDispatch from the configured store instead of manually rebuilding its type.
Common mistakes
- Using plain Redux's default Dispatch type cannot type-check thunk functions; derive the dispatch type from the configured store or use the thunk-aware type.
- The type alone does not execute thunks at runtime. The store must include thunk middleware; configureStore supplies it by default.
Example: Typing a dispatch that accepts thunks
import { configureStore } from '@reduxjs/toolkit'
import type { ThunkDispatch, UnknownAction } from '@reduxjs/toolkit'
type State = { count: number }
const store = configureStore({ reducer: (state: State = { count: 0 }) => state })
type AppDispatch = ThunkDispatch<State, undefined, UnknownAction>
const dispatch: AppDispatch = store.dispatch
dispatch((innerDispatch, getState) => {
innerDispatch({ type: 'increment' })
return getState().count
})This assigns a thunk-capable dispatch type to a store dispatch function and then dispatches a thunk that reads state and dispatches an action.
When to use it
Dispatch a thunk that reads state and emits actions
Hand-written async logic
Represent a dispatch function whose return value may come from middleware
Middleware-enhanced stores
Interview questions
QWhat problem does ThunkDispatch solve?
ThunkDispatch is a dispatch type that understands thunk functions in addition to normal actions. It is useful when a dispatch value must accept a thunk and expose the thunk's dispatch and state access.
Follow-up: How should an application usually obtain its dispatch type? Derive it from the configured store, because that captures the middleware-enhanced dispatch type and avoids manually duplicating middleware details.
QHow does a dispatched thunk execute?
A thunk receives dispatch and getState, so its implementation can dispatch additional actions and inspect current Redux state. The thunk middleware invokes the function when it is passed to dispatch.
Follow-up: Why can the return value differ from a normal action dispatch? Middleware may replace the normal action return behavior; thunk middleware returns the thunk function's result.
QWhy is a store-derived dispatch type preferred?
Thunk-aware dispatch is needed because the core Dispatch type only models ordinary actions. Redux Toolkit's configureStore adds thunk middleware by default, so the store's inferred dispatch type recognizes thunks.
Follow-up: What is the practical TypeScript pattern? Export AppDispatch as typeof store.dispatch and use it in application code or a pre-typed dispatch hook.
Related
ThunkActionThunkMiddlewareDispatchconfigureStorecreateAsyncThunkAppDispatch