Questions
8 of 18
11. What is a thunk in Redux?
22. What is the difference between redux-thunk and createAsyncThunk?
33. How does createAsyncThunk simplify async actions?
44. What are the lifecycle actions automatically created by createAsyncThunk?
55. How do you handle pending, fulfilled, and rejected states in slices?
66. What are the advantages of using createAsyncThunk over manual thunks?
77. How do you pass parameters to a thunk function?
88. How do you handle API errors inside a thunk?
99. How can you cancel a running thunk or API call?
1010. How can you chain multiple async thunks?
1111. How can you use getState and dispatch inside a thunk?
1212. How do you use thunks in combination with RTK Query?
1313. How do you test thunks and async actions?
1414. What are best practices for organizing async logic with thunks?
1515. How do you dispatch a thunk from a React component using hooks?
1616. How do you manage loading indicators with thunks?
1717. What’s the performance implication of using too many thunks?
1818. How can you refactor thunk-based APIs to RTK Query-based APIs?
RTKRTK
Basics
Slice
Actions
Reducers
RTK Query
Store
Thunk
Scenario Based
08 / 18

8. How do you handle API errors inside a thunk?

Handling API Errors in Redux Toolkit Thunks

In Redux Toolkit, you can handle API errors inside a thunk by using try/catch blocks within the async function of createAsyncThunk. The createAsyncThunk function automatically catches errors thrown inside the payload creator and dispatches a rejected action, allowing you to handle them in the slice’s extraReducers.

Steps to Handle API Errors
  1. 1

    1. Use try/catch Inside Thunk: Wrap your async API logic in a try/catch block to catch errors.

  2. 2

    2. Throw or return rejectWithValue: Use rejectWithValue to return a custom error payload to reducers.

  3. 3

    3. Handle Rejected Case in Slice: In extraReducers, handle the rejected state to update error messages or status.

Example: Handling Errors in a Thunk

By using rejectWithValue, you can return meaningful error messages and handle them gracefully in the reducer. This approach ensures better error management and cleaner async logic in Redux Toolkit.