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. Add a status field: Include status in your slice’s state to track API call progress.
2. Handle pending, fulfilled, and rejected states: Update the status accordingly inside extraReducers.
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.

Question Loading...