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

createAsyncThunk tạo thunk action creator cho async logic (gọi API) và tự dispatch ba lifecycle action: pending (bắt đầu → bật loading), fulfilled (thành công → cập nhật data), rejected (thất bại → hiện lỗi).

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

Xử lý trong slice bằng extraReducers với builder pattern:

extraReducers: (builder) => {
  builder
    .addCase(fetchUser.pending, (state) => { state.loading = true })
    .addCase(fetchUser.fulfilled, (state, action) => {
      state.loading = false
      state.data = action.payload
    })
    .addCase(fetchUser.rejected, (state, action) => {
      state.loading = false
      state.error = action.payload
    })
}

Option condition huỷ thunk khi data đã có trong cache, tránh gọi API trùng.
Với RTK Query, phần lớn use case của createAsyncThunk được thay thế hoàn toàn mà không cần viết reducer.

Lưu ý: luôn dùng rejectWithValue thay vì throw trực tiếp — error object không serializable sẽ khiến DevTools hiển thị sai.

Xem toàn bộ State Management cùng filter theo level & chủ đề con.

Mở danh sách State Management

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

Xử lý trong slice bằng extraReducers với builder pattern:

extraReducers: (builder) => {
  builder
    .addCase(fetchUser.pending, (state) => { state.loading = true })
    .addCase(fetchUser.fulfilled, (state, action) => {
      state.loading = false
      state.data = action.payload
    })
    .addCase(fetchUser.rejected, (state, action) => {
      state.loading = false
      state.error = action.payload
    })
}

Option condition huỷ thunk khi data đã có trong cache, tránh gọi API trùng.
Với RTK Query, phần lớn use case của createAsyncThunk được thay thế hoàn toàn mà không cần viết reducer.

Lưu ý: luôn dùng rejectWithValue thay vì throw trực tiếp — error object không serializable sẽ khiến DevTools hiển thị sai.