createAsyncThunk Lifecycle

Three actions from one async function

createAsyncThunk(type, payloadCreator) returns a thunk action creator. When dispatched, it first dispatches a pending action, runs your async payloadCreator, then dispatches fulfilled with the resolved value as payload, or rejected if it throws. A slice handles these in extraReducers with builder.addCase(thunk.pending, ...). The payload creator receives the argument and a thunkAPI object with dispatch, getState, signal (an AbortSignal), rejectWithValue and more.

Side effects live outside reducers

Reducers stay pure; thunks and listeners handle the async work.

Fetching a user

A thunk and its slice cases.

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

type User = { id: string; name: string };

export const fetchUser = createAsyncThunk(
  'user/fetch',
  async (id: string, { signal }) => {
    const res = await fetch(`/api/users/${id}`, { signal });
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return (await res.json()) as User;
  }
);

type UserState = { data: User | null; status: 'idle' | 'loading' | 'succeeded' | 'failed' };

const userSlice = createSlice({
  name: 'user',
  initialState: { data: null, status: 'idle' } as UserState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUser.pending, (state) => { state.status = 'loading'; })
      .addCase(fetchUser.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.data = action.payload;
      })
      .addCase(fetchUser.rejected, (state) => { state.status = 'failed'; });
  },
});

A parcel tracking page

Order placed (pending), delivered (fulfilled) or returned to sender (rejected): the UI shows whichever status the latest update reports.

त्वरित जाँच: Which actions can a createAsyncThunk dispatch for one call?

• pending, then either fulfilled or rejected
• start and end only
• request, success, failure and retry
• Only fulfilled