Error Propagation and Retry Logic in createAsyncThunk

import { createAsyncThunk } from '@reduxjs/toolkit';

// A helper function to wait for a given amount of time using a Promise
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

// Our createAsyncThunk with retry logic
const fetchWithRetry = createAsyncThunk(
  'data/fetchWithRetry',
  async (arg, { rejectWithValue }) => {
    let retryCount = 0;
    const maxRetries = arg.maxRetries;
    const retryDelay = arg.retryDelay;

    try {
      // assuming some API fetching logic like `fetchData()`
      const response = await fetchData();
      return response.data;
    } catch (error) {
      while (retryCount < maxRetries) {
        try {
          // Wait before retrying
          await delay(retryDelay);
          const response = await fetchData();
          return response.data;  // Successful fetch
        } catch (err) {
          retryCount++;
          // We catch the error and continue the loop if the retry count
          // has not exceeded the max number of retries
          if (retryCount >= maxRetries) {
            // Reject with a custom payload if we run out of retries
            return rejectWithValue({ message: 'Max retries reached', error: err });
          }
        }
      }
    }
  }
);