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.
Instructions
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
.