Redux Toolkit · Type Alias

AppDispatch

AppDispatch is the store-specific TypeScript type for Redux dispatch. Derive it from typeof store.dispatch so middleware-provided capabilities, including thunk dispatching, are represented.

How it works

AppDispatch is a TypeScript alias derived directly from the configured Redux store's dispatch function. Because configureStore incorporates the store's middleware into that function type, the alias can correctly type dispatching thunks and other middleware-supported values when supplied to a pre-typed React-Redux hook.

Syntax

export type AppDispatch = typeof store.dispatch

Returns

The dispatch function type inferred from the configured Redux store, including correctly typed middleware additions.

Key points

Declare the alias only after the store exists so it can be inferred from the configured store.
The canonical declaration takes the type of the store's dispatch property.
The inferred alias incorporates dispatch typing supplied by configured middleware.
The store's middleware option determines the resulting dispatch function type.
React applications should expose and use a pre-typed hook built from AppDispatch.

Common mistakes

Using plain useDispatch can omit middleware-specific types; use a pre-typed hook based on AppDispatch instead.

Example: Derive a typed dispatch hook

import { configureStore } from '@reduxjs/toolkit'
import { useDispatch } from 'react-redux'

const store = configureStore({ reducer: {} })

export type AppDispatch = typeof store.dispatch
export const useAppDispatch = useDispatch.withTypes<AppDispatch>()

store.dispatch({ type: 'app/started' })

Create the alias from the configured store, then use it to define a pre-typed dispatch hook.

When to use it

Create a typed dispatch hook

React component dispatching actions and thunks

Preserve middleware dispatch types

Stores with thunk or other middleware

Centralize dispatch typing

Shared TypeScript application setup

Interview questions

QHow should AppDispatch be declared?

Define it as typeof store.dispatch after creating the store. This lets TypeScript infer the dispatch type, including changes introduced by configured middleware such as thunk.

Follow-up: What if middleware is customized? The inferred type reflects correctly typed middleware supplied through the store configuration.

QHow is AppDispatch used with React-Redux?

Use AppDispatch with a pre-typed dispatch hook, such as useDispatch.withTypes<AppDispatch>(). This gives components the store-specific dispatch behavior rather than the base hook type.

Follow-up: Why not annotate every component separately? A shared pre-typed hook centralizes the correct type and avoids repeatedly supplying it.

QWhy derive AppDispatch instead of using a basic Dispatch type?

The alias is derived from the configured store instead of manually listing action types. Consequently, dispatch supports the middleware-handled values that the store's dispatch function accepts.

Follow-up: What enables thunk dispatching? The thunk middleware contributes its dispatch overloads to the inferred store dispatch type.

RootState
useAppDispatch
useDispatch
configureStore
middleware
thunk middleware

Source: Usage With TypeScript | Redux. Checked 2026-10-15.