Questions
5 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
05 / 18

5. How do you handle pending, fulfilled, and rejected states in slices?

Handling Async Lifecycle States in Redux Toolkit Slices

In Redux Toolkit, you can handle the pending, fulfilled, and rejected states of asynchronous actions (created using createAsyncThunk) directly within your slice using the extraReducers builder syntax. This allows you to manage loading indicators, store successful responses, and handle errors consistently.

How Each State Is Handled
  1. 1

    1. pending: Update status to 'loading' to show that an async request is in progress.

  2. 2

    2. fulfilled: Update status to 'succeeded' and store the fetched or processed data from action.payload.

  3. 3

    3. rejected: Update status to 'failed' and capture the error message from action.error.message.

Example: Handling Async States in a Slice

By handling each lifecycle state within extraReducers, you can declaratively manage async data flow — ensuring your UI responds correctly to loading, success, and failure events.