9. How can you cancel a running thunk or API call?

Question

Accepted Answer

In Redux Toolkit, you can cancel a running thunk or API call using the AbortController API built into JavaScript. The createAsyncThunk function provides an abort signal that can be used to cancel ongoing requests. This is especially useful to prevent memory leaks or unnecessary network activity when a component unmounts or a new request replaces an old one. **1. Access the Abort Signal:** The second argument of createAsyncThunk contains an abort signal that you can pass to fetch or other cancellable APIs. **2. Use signal in Fetch Request:** Include the signal in your fetch call so that it can be aborted when requested. **3. Trigger Abort:** You can abort the thunk manually by calling abort() on the promise returned by dispatch(thunk()). import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

export const fetchUser = createAsyncThunk(
  'user/fetchUser',
  async (userId, { signal, rejectWithValue }) => {
    try {
      const response = await fetch(`/api/users/${userId}`, { signal });
      if (!response.ok) {
        throw new Error('Failed to fetch user data');
      }
      return await response.json();
    } catch (error) {
      if (error.name === 'AbortError') {
        return rejectWithValue('Request was cancelled');
      }
      return rejectWithValue(error.message);
    }
  }
);

// Example usage
const promise = dispatch(fetchUser(10));
// To cancel the request
promise.abort(); By using the signal provided by createAsyncThunk, you can cleanly cancel ongoing API requests and prevent unnecessary state updates or side effects in your Redux store.

9. How can you cancel a running thunk or API call?

Cancelling Running Thunks or API Calls in Redux Toolkit

9. How can you cancel a running thunk or API call?

Cancelling Running Thunks or API Calls in Redux Toolkit

Scenario Questions

Follow-up Questions