Using Redux Toolkit's createAsyncThunk

The Async Action Lifecycle

When you dispatch a createAsyncThunk, it progresses through three distinct stages that mirror real-world async operations. Understanding this lifecycle is essential for effectively using the API and integrating it with your reducers.

1. Pending Action

The pending action dispatches immediately when the thunk begins executing, before any async work starts. This action signals that an async operation is in progress and is typically used to update loading state indicators in the UI. Components can listen for this action to show spinners, disable buttons, or display "loading" placeholders. As documented in the Redux Essentials guide, this action enables you to track async state and provide appropriate user feedback throughout the request lifecycle.

2. Fulfilled Action

The fulfilled action dispatches when the promise returned by the payload creator resolves successfully. The resolved value automatically becomes the action's payload, which reducers can use to update application state with the fetched data or confirmation of successful operations. This action indicates that the async work completed without errors and that results are available for use in your components.

3. Rejected Action

The rejected action dispatches when the promise fails--whether due to network errors, server errors, or exceptions thrown in the payload creator. Redux Toolkit automatically serializes any errors that occur, storing them in a standardized format that reducers can access. This action enables applications to gracefully handle failures, display error messages to users, and recover from exceptional conditions.

┌─────────────────────────────────────────────────────────────────┐
│ createAsyncThunk Flow │
├─────────────────────────────────────────────────────────────────┤
│ │
│ dispatch(fetchUserById(123)) │
│ │ │
│ ▼ │
│ ┌─────────────────────┐ │
│ │ PENDING Action │ ← loading = 'pending' │
│ │ (state.loading) │ UI shows spinner │
│ └─────────┬───────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────┐ │
│ │ Payload Creator │ ← async operation executes │
│ │ (await fetch...) │ │
│ └─────────┬───────────┘ │
│ │ │
│ ┌───────┴───────┐ │
│ │ │ │
│ ▼ ▼ │
│ SUCCESS FAILURE │
│ │ │ │
│ ▼ ▼ │
│ ┌──────────┐ ┌──────────────┐ │
│ │FULFILLED │ │ REJECTED │ │
│ │ action │ │ action │ │
│ │payload: │ │ error: │ │
│ │ userData │ │ error_msg │ │
│ └──────────┘ └──────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ REDUCER │ │
│ │ Updates state based on action type │ │
│ └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘

Understanding this three-stage lifecycle enables you to build responsive UIs that accurately reflect the state of asynchronous operations throughout your application. Proper state management patterns like these are foundational to our web development approach, ensuring applications remain performant and maintainable at scale.

Integrating with createSlice using extraReducers

The extraReducers configuration in createSlice handles actions defined outside the slice, including createAsyncThunk lifecycle actions. The builder callback notation provides a clean, chainable syntax for defining state transitions that responds to each lifecycle action from your async thunks.

The builder notation, as covered in the DEV Community guide on async logic with Redux Toolkit, offers several advantages over the older object syntax. It allows for better TypeScript inference, makes it easier to add matchers for common patterns, and provides a more readable structure when handling multiple async actions in a single slice.

For logic that should run regardless of whether the async operation succeeded or failed--such as clearing temporary state or stopping loading indicators--Redux Toolkit provides the settled matcher. This matches both fulfilled and rejected actions, allowing you to write cleanup logic once instead of duplicating it across multiple case handlers.

When building production applications, these patterns integrate seamlessly with our comprehensive testing strategies to ensure reliability across your application stack.

Error Handling with rejectWithValue

The rejectWithValue utility from thunkAPI allows you to return custom error payloads instead of relying on Redux Toolkit's default error serialization. This is essential for handling API error responses that include structured error data, as covered in the LogRocket tutorial on createAsyncThunk.

By default, when a payload creator throws an error or returns a rejected promise, createAsyncThunk serializes the error using a standard format. However, this approach has limitations--you cannot easily include custom error data from your API responses, and the serialized error format may not match your application's error handling needs. The rejectWithValue utility solves this by allowing you to return a custom payload for rejected actions, giving you full control over the error structure.

When using rejectWithValue, the custom error data is accessible through action.payload in the rejected case, just like successful responses. This enables reducers to handle different error types appropriately and provides components with rich error information for display to users.

Robust error handling is critical for any production application. Our web development services emphasize defensive programming practices that ensure graceful degradation and clear user feedback when issues occur.

Advanced Features

Request Cancellation with AbortController

Cancel in-flight requests when users navigate away or trigger new searches. createAsyncThunk integrates with the browser's AbortController API to support request cancellation. This is essential for preventing state updates on unmounted components and reducing unnecessary network traffic.

Condition Callback

Skip execution based on application state--for example, to prevent duplicate requests for the same data or check authentication status before proceeding. The condition option receives the thunk arguments and the thunkAPI object, allowing you to make informed decisions about whether to proceed with the async operation.

Dispatch Options

When dispatching a thunk, you can pass an optional second argument with configuration options. The signal option allows external control over request cancellation, which is useful when coordinating multiple related requests or integrating with third-party libraries.

For users who trigger the same async operation multiple times--such as search queries or filter changes--implementing these features together prevents unnecessary API calls and reduces server load, improving both user experience and application performance. These optimization patterns are especially important when building high-performance web applications that scale to handle increased traffic.

Applications that rely on external APIs for core functionality benefit from implementing these cancellation patterns to ensure reliability. Whether you're integrating AI services or connecting to third-party data providers, proper request management prevents race conditions and ensures consistent behavior.

TypeScript Patterns

createAsyncThunk provides full TypeScript support with generic type parameters for argument types, return types, and thunkAPI types. Proper typing ensures type safety throughout your async logic, from the payload creator callback to reducer action handlers, as demonstrated in this comprehensive TypeScript guide.

The generic type parameters work as follows: the first parameter defines the return type (fulfilled payload), the second defines the argument type passed to the payload creator, and the optional third parameter extends the thunkAPI type to include custom rejectValue types. When using rejectWithValue, you define the type of the rejected payload through this third generic parameter.

TypeScript inference flows through the entire async workflow--action creators receive typed arguments, dispatched actions carry typed payloads, and reducers can access strongly-typed data structures. This eliminates an entire category of runtime errors and makes refactoring async code significantly safer.

For teams working on complex applications, combining TypeScript with Redux Toolkit's type inference capabilities significantly reduces debugging time and improves code maintainability. This approach aligns with best practices we follow in all our web development projects, ensuring type-safe codebases that are easier to maintain and extend.

Sources

1. Redux Toolkit: createAsyncThunk API - Official API reference documentation
2. Redux Essentials: Async Logic and Data Fetching - Official Redux tutorial on async patterns
3. LogRocket: Using Redux Toolkit's createAsyncThunk - Practical error handling tutorial
4. DEV Community: Mastering Async Logic with createAsyncThunk - TypeScript and builder notation guide