As you know, createAsyncThunk takes care of dispatching actions for each of the promise lifecycle states: pending, fulfilled, and rejected. But what exactly do these actions look like?

Building off the action type string you pass to it, createAsyncThunk produces an action type for each promise lifecycle states. If you pass the action type string 'resourceType/actionType' to createAsyncThunk, it will produce these three action types:

  • 'resourceType/actionType/pending'
  • 'resourceType/actionType/fulfilled'
  • 'resourceType/actionType/rejected'

To use our earlier example:

import { createAsyncThunk } from '@reduxjs/toolkit' import { fetchUser } from './api' const fetchUserById = createAsyncThunk( 'users/fetchUserById', // action type async (userId, thunkAPI) => { // payload creator const response = await fetchUser(userId) return response.data } )

When you pass createAsyncThunk the action type string 'users/fetchUserById', createAsyncThunk produces these three action types:

  • 'users/fetchUserById/pending'
  • 'users/fetchUserById/fulfilled'
  • 'users/fetchUserById/rejected'

If you need to access the individual pending/fulfilled/rejected action creators, you can reference them like this:

  • fetchUserById.pending
  • fetchUserById.fulfilled
  • fetchUserById.rejected

You will have to handle these action types in your reducers if you want to reflect these promise lifecycle states in your app. In the next exercise, we will show you how to do that.



In the code editor, we’ve used createAsyncThunk to define a thunk action creator, loadRecipes. What three action type strings are generated by the call to createAsyncThunk? Write out the three strings in your code editor in the comments below the call to loadRecipes.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?