JS Built-ins
← redux-toolkit11 / 22
redux-toolkitcreateAsyncThunkintermediate

createAsyncThunk Basics

📖 Usage Example
const { createAsyncThunk } = ReduxToolkit
const fetchUser = createAsyncThunk('user/fetch', async (id) => {
  const res = await fetch('/api/users/' + id)
  return res.json()
})
fetchUser.fulfilled.type // → 'user/fetch/fulfilled'

createAsyncThunk wraps an async function and automatically dispatches pending/fulfilled/rejected lifecycle actions.

createAsyncThunk Basics

createAsyncThunk(type, payloadCreator) creates an async action creator that automatically dispatches pending, fulfilled, and rejected actions around the async operation.

Challenge: Create a fetchUser thunk and handle its fulfilled case in a slice.

fetchUser.fulfilled.type // → 'user/fetch/fulfilled'
💡 Hints (3)
  • • `createAsyncThunk` generates `.pending`, `.fulfilled`, and `.rejected` action creators.
  • • Use `extraReducers` (not `reducers`) to handle lifecycle actions from another thunk.
  • • You can construct fulfilled/pending/rejected actions synchronously for testing: `fetchUser.fulfilled(payload, reqId, arg)`.