如何正确使用来自Redux Toolkit的createAsyncThunk和TypeScript

Question

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

fetchAll(arg:any(：AsyncThunkAction<未知，任意，｛｝>

应为1个参数，但得到了0。

createAsyncThunk.d.ts(107118(：未提供"arg"的参数。

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

沙盒中的相关文件：

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