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

Question

Accepted Answer

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. **1. pending:** Update `status` to 'loading' to show that an async request is in progress. **2. fulfilled:** Update `status` to 'succeeded' and store the fetched or processed data from `action.payload`. **3. rejected:** Update `status` to 'failed' and capture the error message from `action.error.message`. import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

export const fetchUsers = createAsyncThunk('users/fetchUsers', async () => {
  const response = await fetch('/api/users');
  return response.json();
});

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

Handling Async Lifecycle States in Redux Toolkit Slices

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

Handling Async Lifecycle States in Redux Toolkit Slices

Scenario Questions

Follow-up Questions