16. How do you manage loading indicators with thunks?

Question

Accepted Answer

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'). **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. import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'; export const fetchUsers = createAsyncThunk( 'users/fetchUsers', async () => { const response = await fetch('/api/users'); if (!response.ok) throw new Error('Failed to fetch users'); return await response.json(); } ); const usersSlice = createSlice({ name: 'users', initialState: { data: [], status: 'idle', error: null }, extraReducers: (builder) => { builder .addCase(fetchUsers.pending, (state) => { state.status = 'loading'; }) .addCase(fetchUsers.fulfilled, (state, action) => { state.status = 'succeeded'; state.data = action.payload; }) .addCase(fetchUsers.rejected, (state, action) => { state.status = 'failed'; state.error = action.error.message; }); }, }); export default usersSlice.reducer; import React, { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { fetchUsers } from './usersSlice'; const UsersList = () => { const dispatch = useDispatch(); const { data, status, error } = useSelector((state) => state.users); useEffect(() => { dispatch(fetchUsers()); }, [dispatch]); if (status === 'loading') return

Loading users...

; if (status === 'failed') return

Error: {error}

; return (

{user.name}

); }; export default UsersList; 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.

16. How do you manage loading indicators with thunks?

Managing Loading Indicators with Thunks in Redux Toolkit

Scenario Questions

Follow-up Questions