Detect fulfilled requests
Handle successful async requests in middleware or another action-processing function.
Redux Toolkit · Function
isFulfilled
isFulfilled creates a type-guard matcher for fulfilled actions generated by createAsyncThunk. Supply one or more thunk action creators, then use the returned matcher to test actions and obtain narrowed TypeScript types.
How it works
isFulfilled is a higher-order matcher that returns a TypeScript type guard. With one or more async-thunk creators, the returned function recognizes fulfilled lifecycle actions belonging to those creators and narrows the action type inside a conditional block.
Syntax
isFulfilled(...actionCreators)Parameters
| Name | Type | Description |
|---|---|---|
actionCreators | AsyncThunkActionCreator[] | One or more async-thunk action creators whose fulfilled lifecycle actions should be matched. |
Returns
A type-guard matcher function that returns true for matching fulfilled createAsyncThunk actions.
Key points
- Calling isFulfilled produces another function rather than immediately checking an action.
- The resulting matcher checks whether an action represents a fulfilled async-thunk lifecycle event.
- Its matching scope is the fulfilled stage emitted by createAsyncThunk.
- The utility accepts thunk action creators as arguments, including a single creator or multiple creators.
- A matcher configured with two thunks can recognize fulfilled actions from the configured creators.
Common mistakes
- Passing multiple action creators requires the action to satisfy all supplied matchers, so use separate matchers when you need alternative thunks.
Example: Match fulfilled thunk actions
import { createAsyncThunk, isFulfilled } from '@reduxjs/toolkit'
import type { UnknownAction } from '@reduxjs/toolkit'
const fetchUser = createAsyncThunk('user/fetch', async () => ({ id: 1 }))
const fetchPosts = createAsyncThunk('posts/fetch', async () => [])
const isSuccessfulRequest = isFulfilled(fetchUser, fetchPosts)
export function handle(action: UnknownAction) {
if (isSuccessfulRequest(action)) {
return action.payload
}
return undefined
}
Creates a matcher that narrows actions to fulfilled lifecycle actions from either thunk.
When to use it
Reuse fulfilled-action handling
Use a builder matcher to share reducer logic across selected async thunks.
Type-safe payload access
Narrow an unknown Redux action before reading its fulfilled payload.
Interview questions
QWhat does isFulfilled do?
isFulfilled returns a higher-order function that acts as a type guard for fulfilled actions generated by createAsyncThunk. The returned matcher can be called with an action and narrows its type when it matches.
Follow-up: How would you match fulfilled actions from either of two thunks? Pass both thunk creators to isFulfilled and use the returned matcher in the conditional.
QHow is the matcher used?
Call isFulfilled with one or more async-thunk action creators, then invoke the returned function with an action. It returns true only when the action is a fulfilled lifecycle action matching the supplied creators.
Follow-up: What does the type guard provide beyond a boolean? It lets TypeScript infer the corresponding fulfilled-action shape inside the true branch.
QWhich lifecycle does it recognize?
The utility targets the fulfilled stage of createAsyncThunk's promise lifecycle. This makes it suitable for checking actions in reducers, middleware, or other action-handling code.
Follow-up: How can a reducer use it? Register the returned matcher with a builder matcher so matching fulfilled actions are handled without naming each action type manually.
Related
isPendingisRejectedisAllOfisAnyOfcreateAsyncThunk