How to fix Thunk action type is required for createAsyncThunk in React

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

// Incorrect imports that may cause issues:
// import createAsyncThunk from '@reduxjs/toolkit'; // Wrong - not a default export
// import { createAsyncThunk } from 'redux'; // Wrong - not from Redux Toolkit

npm list @reduxjs/toolkit
# Should show version 1.9.0 or higher for best TypeScript support

// Correct usage with type parameter
const fetchUserById = createAsyncThunk(
  'users/fetchById', // ← REQUIRED type parameter
  async (userId: number) => {
    const response = await fetch(`/api/users/${userId}`);
    return response.json();
  }
);

// Also valid with template literal
const updateUser = createAsyncThunk(
  `users/update`,
  async (userData: User) => {
    // async logic
  }
);

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    // These help catch type errors early
  }
}

// Before (JavaScript style)
const fetchData = createAsyncThunk(async () => {
  // ...
});

// After (TypeScript with explicit types)
const fetchData = createAsyncThunk(
  'data/fetch', // Explicit type parameter
  async () => {
    // ...
  }
);

interface User {
  id: number;
  name: string;
}

interface ThunkApiConfig {
  state: RootState;
  dispatch: AppDispatch;
  extra: { api: AxiosInstance };
  rejectValue: string; // Custom error type
}

const fetchUser = createAsyncThunk<
  User, // Return type of payload creator
  number, // First argument to payload creator (userId)
  ThunkApiConfig // thunkApi configuration
>(
  'users/fetch',
  async (userId, thunkApi) => {
    const { getState, dispatch, extra, rejectWithValue } = thunkApi;

    try {
      const response = await extra.api.get(`/users/${userId}`);
      return response.data;
    } catch (error) {
      return rejectWithValue('Failed to fetch user');
    }
  }
);

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

const typedCreateAsyncThunk = createAsyncThunk.withTypes<{
  state: RootState;
  dispatch: AppDispatch;
  extra: { api: AxiosInstance };
  rejectValue: string;
}>();

const fetchUser = typedCreateAsyncThunk(
  'users/fetch', // Still required!
  async (userId: number) => {
    // ...
  }
);

const fetchUser = createAsyncThunk('users/fetch', async (userId: number) => {
  // ...
});

// Generated action types:
// fetchUser.pending.type === 'users/fetch/pending'
// fetchUser.fulfilled.type === 'users/fetch/fulfilled'
// fetchUser.rejected.type === 'users/fetch/rejected'

// Usage in reducer:
builder
  .addCase(fetchUser.pending, (state) => {
    state.loading = true;
  })
  .addCase(fetchUser.fulfilled, (state, action) => {
    state.loading = false;
    state.data = action.payload;
  });