Conditional Data Fetching with createAsyncThunk

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

// Define an async thunk action creator
export const fetchUserData = createAsyncThunk(
  'user/fetchData',
  async (userId, { getState, rejectWithValue }) => {
    // Access current state to make conditional logic
    const { userData } = getState();

    // Check if user data is already fetched
    if (userData[userId]) {
      // User data is already available, no need to fetch, just return the current data
      return userData[userId];
    }

    try {
      // Fetch the user data from an API
      const response = await fetch(`https://api.example.com/users/${userId}`);

      // Check if the response is successful
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }

      // Parse the response data
      const data = await response.json();
      // Return the fetched data
      return data;
    } catch (error) {
      // In case of an error, use rejectWithValue to return a custom error payload
      return rejectWithValue(error.message);
    }
  }
);