Wie verwendet man createAsyncThunk von Redux Toolkit mit TypeScript korrekt?

Ich möchte ein Redux-Slice für die Benutzer in dem Projekt erstellen, an dem ich arbeite. Ich habe diesen Code-Sandbox und ich weiß nicht, warum es folgenden Fehler bei dem fetchAll-Aufruf in der MyButton.tsx-Datei gibt:

fetchAll(arg: any): AsyncThunkAction<unbekannt, any, {}>

1 Argument erwartet, aber 0 erhalten.

createAsyncThunk.d.ts(107, 118): Ein Argument für 'arg' wurde nicht bereitgestellt.

Ich habe ähnlichen Code in dem Projekt, an dem ich arbeite, und er hat diesen Fehler nicht. Ich habe erwartet, dass dies genauso funktioniert wie in anderen ähnlichen Dateien.

Die relevanten Dateien aus der Sandbox:

MeinButton.tsx

import React from "react";
import { useDispatch } from "react-redux";
import { fetchAll } from "./redux/usersSlice";

export const MyButton = ({ children }: { children: any }) => {
  const dispatch = useDispatch();

  return (
    <button
      onClick={() => {
        dispatch(fetchAll()); // I get an error on this fetchAll() call
      }}
    >
      {children}
    </button>
  );
};

Die Definition von fetchAll

export const fetchAll = createAsyncThunk(
  "users/fetchAll",
  async (_: any, thunkAPI) => {
    const users = await new Promise((resolve, reject) => {
      resolve(["a", "b", "c"]);
    });

    return users;
  }
);

Update 1

Wenn ich fetchAll(null) anstelle von fetchAll() aufrufe, funktioniert es gut.

Antwort #1

Verwenden Sie den Typ void, wenn Sie dieses Argument nicht möchten. any erzwingt ein Argument.

export const fetchAll = createAsyncThunk(
  "users/fetchAll",
  async (_: void, thunkAPI) => {
    const users = await new Promise((resolve, reject) => {
      resolve(["a", "b", "c"]);
    });

    return users;
  }
);

Antwort #2

Und wenn Sie die Typen angeben möchten:

interface IThunkApi {
  dispatch: AppDispatch,
  state: IRootState,
}

export const fetchAll = createAsyncThunk<
string[], // return type
void, // args type
IThunkApi, // thunkAPI type
>("users/fetchAll", async (args, thunkAPI) => {
  const users = await new Promise((resolve, reject) => {
    resolve(["a", "b", "c"]);
  });
   return users;
});