createAsyncThunk được dùng để làm gì? Các trạng thái lifecycle của nó là gì?

createAsyncThunk tự động dispatch pending/fulfilled/rejected — luôn dùng rejectWithValue thay vì throw để error serializable. createAsyncThunk tạo thunk action creator xử lý async logic (API calls), tự động dispatch 3 lifecycle actions: pending (request bắt đầu → show loading), fulfilled (thành công → update data), rejected (thất bại → show error).

Ví dụ

createAsyncThunk('users/fetch', async (userId, { rejectWithValue }) => { try { return await api.getUser(userId) } catch (err) { return rejectWithValue(err.response.data) } })

• Xử lý trong slice dùng extraReducers với builder pattern: builder.addCase(fetchUser.pending, (state) => { state.loading = true }).
• Lưu ý: luôn dùng rejectWithValue thay vì throw error trực tiếp — nếu không, error object không serializable và DevTools hiển thị sai.
• Cũng nên dùng condition option để cancel thunk nếu data đã có trong cache, tránh duplicate API calls.
• Với RTK Query, nhiều use case của createAsyncThunk có thể thay thế hoàn toàn mà không cần viết reducer.

createAsyncThunk automatically dispatches pending/fulfilled/rejected — always use rejectWithValue instead of throw so errors are serializable. createAsyncThunk creates a thunk action creator that handles async logic (API calls), automatically dispatching three lifecycle actions: pending (request started → show loading), fulfilled (success → update data), rejected (failure → show error).

Example

createAsyncThunk('users/fetch', async (userId, { rejectWithValue }) => { try { return await api.getUser(userId) } catch (err) { return rejectWithValue(err.response.data) } })

• Handle in a slice using extraReducers with builder pattern: builder.addCase(fetchUser.pending, (state) => { state.loading = true }).

Pitfall: always use rejectWithValue instead of throwing errors directly — otherwise the error object is not serializable and DevTools display it incorrectly.

• Also use the condition option to cancel the thunk if data is already cached, avoiding duplicate API calls.
• With RTK Query, many createAsyncThunk use cases can be replaced entirely without writing a reducer.