createAsyncThunk

createAsyncThunk is a utility from Redux Toolkit that streamlines writing asynchronous thunks. It generates a thunk action creator and automatically emits three action types that reflect the lifecycle of an async request: pending, fulfilled, and rejected. This helps manage loading state and error handling in reducers with less boilerplate.

Usage: createAsyncThunk(type, payloadCreator, options?). The type is a string prefix such as 'users/fetchById'. The payloadCreator is an async function that performs the async work and returns the value to be used on fulfillment, or uses thunkAPI.rejectWithValue to produce a custom error payload. The payloadCreator receives the argument passed when dispatching and a thunkAPI object with helpers like dispatch, getState, extra, requestId, signal, rejectWithValue, and fulfillWithValue.

Generated actions can be consumed in a slice via extraReducers. For example: fetchUserById = createAsyncThunk('users/fetchById', async (id, thunkAPI) => { const res = await api.fetchUser(id); if (res.ok) return res.data; return thunkAPI.rejectWithValue(res.error); }); In a slice you listen for fetchUserById.pending, fetchUserById.fulfilled, and fetchUserById.rejected to update state accordingly (loading flags, data, and error).

Notes: createAsyncThunk handles promise rejections and can integrate with TypeScript typings. If you throw an error or do not use rejectWithValue, error information appears in action.error rather than action.payload. You can also use the condition option to skip execution based on current state.

Overall, it offers a standardized pattern for common async flows in Redux stores and is often used alongside createSlice. For data fetching with more complex caching or server interactions, Redux Toolkit's RTK Query may be more appropriate.