Type reducer payloads
A slice reducer updates state from a numeric, string, or object payload.
Redux Toolkit · Type Alias
PayloadAction
PayloadAction<T> is a Redux Toolkit TypeScript type for describing an action whose payload has type T. Use it on slice reducer action parameters to type payload access and the generated action creator's argument.
How it works
PayloadAction<T> describes a Redux action whose payload has type T. Use it for a reducer's action parameter to type action.payload; Redux Toolkit then uses that information to type the corresponding generated action creator.
Syntax
PayloadAction<T>Parameters
| Name | Type | Description |
|---|---|---|
T | generic type parameter | The TypeScript type of the action's payload field; it may be a primitive, object, or other application-defined type. |
Returns
A Redux action type whose payload is typed as T.
Key points
- The generic argument is the payload's type, such as
number, a string, or a custom object shape. - Typing a reducer with
PayloadAction<T>also types the corresponding generated action creator's payload argument. - A reducer declared with
PayloadAction<number>generates an action creator that requires a numeric argument. - Apply the alias to each payload-bearing reducer action parameter so payload access is statically typed.
- Within
createSlice.reducers, annotate each action parameter with the payload type it expects.
Common mistakes
- Use PayloadAction for reducers that consume a payload; otherwise the payload's intended type is not declared at the reducer boundary.
Example: Typing a reducer payload
import { createSlice, type PayloadAction } from '@reduxjs/toolkit'
type CounterState = { value: number }
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 } satisfies CounterState,
reducers: {
incrementByAmount(state, action: PayloadAction<number>) {
state.value += action.payload
},
},
})
counterSlice.actions.incrementByAmount(5)The generic argument specifies the payload type, so this reducer accepts a numeric payload and the generated action creator requires a number.
When to use it
Propagate types to action creators
A slice's generated action creators should reject incorrectly typed arguments.
Describe object payloads
A reducer receives structured data such as an ID and text together.
Interview questions
QWhat is PayloadAction used for?
PayloadAction<T> is a TypeScript type from Redux Toolkit used to specify the type of an action's payload. For example, PayloadAction<number> makes action.payload a number inside a reducer.
Follow-up: How does this affect the generated action creator? Its argument is inferred from the payload type, so a reducer using PayloadAction<number> produces an action creator that requires a number.
QHow do you type a payload-bearing slice reducer?
Declare the reducer action parameter as PayloadAction<T>, where T is the payload shape. This provides the payload type inside the reducer and lets Redux Toolkit correctly type the action creator generated for that reducer.
Follow-up: Can T be an object? Yes; use an object type such as PayloadAction<{ id: string; text: string }> when the action carries multiple related values.
QWhat does the generic parameter mean?
The generic parameter represents the type of action.payload. If a reducer uses PayloadAction<number>, callers must pass a number to its generated action creator, and the reducer receives that number as its payload.
Follow-up: What if an action has no payload? Do not provide a payload type for that reducer; use the no-payload reducer form instead.
Related
createSlicecreateActioncreateReduceraction.payload