Skip to Content
Learn
Managing Promise Lifecycle Actions
Actions Generated by createAsyncThunk

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 producers these three actions 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.

Instructions

1.

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.

Folder Icon

Take this course for free

Already have an account?