Questions
16 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
16 / 18

16. How do you manage loading indicators with thunks?

Managing Loading Indicators with Thunks in Redux Toolkit

Managing loading indicators in Redux Toolkit with thunks involves tracking the request status inside your slice’s state. The createAsyncThunk API automatically generates pending, fulfilled, and rejected actions, which can be handled in reducers to update a status field (e.g., 'idle', 'loading', 'succeeded', 'failed').

Steps to Manage Loading Indicators
  1. 1

    1. Add a status field: Include status in your slice’s state to track API call progress.

  2. 2

    2. Handle pending, fulfilled, and rejected states: Update the status accordingly inside extraReducers.

  3. 3

    3. Use status in the component: Use the status value from Redux to show or hide loading spinners or messages in your UI.

Example: Managing Loading State with a Thunk
Example: Using Loading Indicator in a React Component

By managing the loading state through the Redux slice and reacting to it in your components, you can provide clear and responsive feedback to users during async operations.