Group async-thunk handling
Middleware or reducers need to handle pending, fulfilled, or rejected actions from a selected group of async thunks.
Redux Toolkit · Function
isAsyncThunkAction
Returns a type-guard matcher for actions created by createAsyncThunk. Pass thunk creators to restrict matches to those thunks, or omit them to recognize async-thunk actions generally.
How it works
isAsyncThunkAction is a higher-order matcher that returns a TypeScript type guard. With async thunk action creators supplied, the returned function narrows actions to those produced by any of those thunks; without supplied creators, it tests whether an action belongs to an async thunk lifecycle.
Syntax
isAsyncThunkAction(...asyncThunkCreators)Parameters
| Name | Type | Description |
|---|---|---|
...asyncThunkCreators | AsyncThunkActionCreator[] | Optional async thunk action creators used to restrict which thunk-generated actions match. |
Returns
A matcher function/type guard that returns true when the action is an async-thunk action matching the supplied creators, or any async-thunk action when none are supplied.
Key points
- It returns a reusable predicate whose type-guard behavior helps TypeScript narrow matching actions.
- Its general purpose is recognizing actions produced by Redux Toolkit async thunks.
- Supplying action creators limits the matcher to the provided async thunk creators.
- The matcher utilities support a creator-argument form that returns a condition-specific matcher.
- The no-creator form checks whether an action is an async-thunk action with the relevant condition.
Common mistakes
- Passing thunk creators produces a reusable matcher rather than directly returning the match result.
- When checking a single action, omit thunk arguments to match any async-thunk action.
Example: Match actions from selected async thunks
import { isAsyncThunkAction } from '@reduxjs/toolkit'
import type { UnknownAction } from '@reduxjs/toolkit'
import { requestThunk1, requestThunk2 } from './thunks'
const isRequestAction = isAsyncThunkAction(requestThunk1, requestThunk2)
export function handle(action: UnknownAction) {
if (isRequestAction(action)) {
action.type
}
}Create a matcher for actions generated by either supplied async thunk.
When to use it
Recognize thunk lifecycle actions
Application logic needs to detect async-thunk lifecycle actions without maintaining action-type string lists.
Narrow action types
TypeScript code needs action narrowing after checking the origin of an action.
Interview questions
QWhat does isAsyncThunkAction do?
It is a higher-order function that returns a type guard for actions created by createAsyncThunk. It can be called with thunk action creators to restrict matching to those thunks.
Follow-up: How would you match every async-thunk action? Call it without thunk arguments and use the returned matcher on the action.
QHow is it used with specific thunks?
Provide one or more async thunk action creators, then invoke the returned matcher with an action. The matcher returns true when the action was generated by one of those thunks.
Follow-up: What benefit does the returned type guard provide in TypeScript? It narrows the action inside the conditional branch to a recognized async-thunk action.
QWhat two matching modes does the documentation describe?
The utility supports both a creator-filtered form and a general form. The creator-filtered form matches actions from the supplied thunks, while the general form matches an async-thunk lifecycle action.
Follow-up: Which API commonly generates the actions being recognized? Redux Toolkit's createAsyncThunk API generates the thunk and its lifecycle actions.
Related
createAsyncThunkisPendingisFulfilledisRejectedisRejectedWithValueisAllOfisAnyOf