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.