In the last exercise, we promised to elaborate on the two arguments that the payload creator (the asynchronous function we pass to createAsyncThunk
) receives: arg
and thunkAPI
. The first argument, arg
, will be equal to the first argument passed to the thunk action creator itself. For example, if we call fetchUserById(7)
, then inside the payload creator, arg
will be equal to 7.
But what if you need to pass multiple arguments to your thunk? Since the payload creator only receives the first argument passed to the thunk action creator, you’ll want to bundle multiple arguments into a single object. For example, say we want to search our app’s users by first and last name. If the thunk action creator is called searchUsers
, we would call it like this: searchUsers({firstName: 'Ada', lastName: 'Lovelace'})
.
If you need to access these variables individually, you can use ES6 destructuring assignment to unpack the object when you declare the payload creator and pass it to createAsyncThunk
, like this :
const searchUsers = createAsyncThunk( 'users/searchUsers', async ({ firstName, lastName}, thunkAPI) => { // perform the asynchronous search request here } )
If your thunk requires no arguments, you can just call your thunk action creator without, and the arg
argument will be undefined.
In the event the thunk requires only one param (for example, fetching a specific resource by id
) you should name that first param semantically. Here’s the fetchUserById
example from the last exercise, with the arg
parameter semantically renamed to userId
.
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 } )
The payload creator’s second argument, thunkAPI
, is an object containing several useful methods, including the store’s dispatch
and getState
. For an exhaustive list of methods available in the thunkAPI
object, you can read the documentation.
Instructions
In the code editor, we’ve defined a thunk action creator searchRecipesByName
. Rename arg
to the semantically appropriate variable name recipeName
.