Using Redux Toolkit's createAsyncThunk to Handle Async API Calls

Problem: Boilerplate for Async Actions in Redux

When fetching data from an API with plain Redux, you must define three action types (request, success, failure), create action creators, and write reducer logic for each stage. This repetitive code increases the chance of mistakes and obscures the core logic.

Takeaway

Redux Toolkit’s createAsyncThunk generates the pending, fulfilled, and rejected action types and creators automatically. By integrating the thunk with a slice’s extraReducers, you get a predictable async flow with minimal boilerplate.

Prerequisites

• Node.js project with npm or yarn.
• Basic Redux store already configured (store, provider, root reducer).
• Redux Toolkit version 1.5.0 or higher installed (npm install @reduxjs/toolkit).
• Familiarity with React components (optional, for dispatching).

Procedure

1. Install Redux Toolkit (if not already)

   Run in your project root:

   npm install @reduxjs/toolkit

   Verify installation by checking package.json for "@reduxjs/toolkit": "^1.5.0" or higher.

2. Create an async thunk

   Define a function that returns a promise (e.g., a fetch call). Use createAsyncThunk to wrap it.

   import { createAsyncThunk } from '@reduxjs/toolkit'
   
   // Placeholder for your API endpoint
   const API_URL = 'https://example.com/api/posts'
   
   export const fetchPosts = createAsyncThunk(
     'posts/fetchPosts',
     async (_, { rejectWithValue }) => {
       try {
         const response = await fetch(API_URL)
         if (!response.ok) {
           throw new Error('Network response was not ok')
         }
         return await response.json()
       } catch (err) {
         return rejectWithValue(err.message)
       }
     }
   )
   

   The thunk will automatically produce three action types: posts/fetchPosts/pending, posts/fetchPosts/fulfilled, and posts/fetchPosts/rejected.

3. Create a slice with extraReducers

   In your slice file, handle the generated actions to update state.

   import { createSlice } from '@reduxjs/toolkit'
   import { fetchPosts } from './postsThunk'
   
   const postsSlice = createSlice({
     name: 'posts',
     initialState: {
       items: [],
       loading: false,
       error: null
     },
     reducers: {},
     extraReducers: (builder) => {
       builder
         .addCase(fetchPosts.pending, (state) => {
           state.loading = true
           state.error = null
         })
         .addCase(fetchPosts.fulfilled, (state, action) => {
           state.loading = false
           state.items = action.payload
         })
         .addCase(fetchPosts.rejected, (state, action) => {
           state.loading = false
           state.error = action.payload || action.error.message
         })
     }
   })
   
   export default postsSlice.reducer
   

4. Add the slice reducer to the store

   Ensure the store includes the reducer.

   import { configureStore } from '@reduxjs/toolkit'
   import postsReducer from './postsSlice'
   
   const store = configureStore({
     reducer: {
       posts: postsReducer
     }
   })
   
   export default store
   

5. Dispatch the thunk from a component

   In a React component, dispatch fetchPosts (e.g., in a useEffect).

   import { useEffect } from 'react'
   import { useDispatch, useSelector } from 'react-redux'
   import { fetchPosts } from './postsThunk'
   
   function PostsList() {
     const dispatch = useDispatch()
     const { items, loading, error } = useSelector(state => state.posts)
   
     useEffect(() => {
       dispatch(fetchPosts())
     }, [dispatch])
   
     if (loading) return 
   Loading…
     if (error) return 
   Error: {error}
   
     return (
       
   
         {items.map(post => (
           
   {post.title}
         ))}
       
     )
   }
   
   export default PostsList
   

6. Expected checks

   Open Redux DevTools and dispatch the thunk. You should observe three actions in order:

   1. posts/fetchPosts/pending – sets loading to true.
   2. Either posts/fetchPosts/fulfilled with payload data – updates items and clears loading, or posts/fetchPosts/rejected with error message – sets error and clears loading.

   Verify that the UI reflects the loading state, then either the list of posts or an error message.

7. Recovery options

   If the thunk rejects, the rejected case already stores an error message in state. You can:

   • Show a retry button that re‑dispatches fetchPosts.
   • Reset the error by dispatching a custom action (e.g., clearError) defined in the slice’s reducers.
   • Optionally roll back optimistic updates by resetting items to previous values in the rejected case.

Limitations

While createAsyncThunk eliminates boilerplate, you still need to:

• Define proper TypeScript types for the thunk’s argument and return value if using TypeScript.
• Handle cancellation manually if your use case requires aborting ongoing requests (e.g., with AbortController).
• Remember that the thunk only automates the three lifecycle actions; additional side‑effects (like logging) must be added inside the payload creator or via middleware.

Verification

To confirm everything works:

1. Run the application and open Redux DevTools.
2. Trigger the component that dispatches fetchPosts.
3. Check that the three expected actions appear in the log.
4. Inspect the state changes: loading toggles, items fills with data or error is set.
5. If an error occurs, verify that the UI shows the error message and that a retry button re‑dispatches the thunk correctly.

No state‑changing operation is performed beyond the normal Redux update flow, so a formal rollback is not required; you can simply re‑dispatch the thunk or clear error state as described.