如何正确使用 Redux Toolkit 中的 createAsyncThunk 和 TypeScript？

Question

我想为我工作的项目中的用户创建一个 Redux 切片。我有 this code sandbox，但我不知道为什么 MyButton.tsx 文件中的 fetchAll 调用会出现以下错误：

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

Expected 1 arguments, but got 0.

createAsyncThunk.d.ts(107, 118): An argument for 'arg' was not provided.

我在我工作的项目中有类似的代码，它没有这个错误。我希望它能像在其他类似文件中一样工作。

沙箱中的相关文件：

MyButton.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>
  );
};

fetchAll的定义

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

    return users;
  }
);

更新 1

如果我调用 fetchAll(null) 而不是 fetchAll()，效果很好。

Answer 1

如果您不需要该参数，请使用 void 类型。 any 强制争论。

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

    return users;
  }
);

Answer 2

如果要指定类型：

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;
});

如何正确使用 Redux Toolkit 中的 createAsyncThunk 和 TypeScript？

How to use createAsyncThunk from Redux Toolkit with TypeScript correctly?

dispatch

typescript

redux

react-redux

redux-toolkit

MyButton.tsx

fetchAll的定义

更新 1