如何在 redux 工具包中将参数传递给 createAsyncThunk？

Question

所以我是 redux-toolkit 的新手，我想做一些非常简单的事情。我想通过这个辅助函数在 POST 请求上发送一些数据。所以我尝试了这个

export const submitPaymentToServer = createAsyncThunk(
    'data/fetchAll',
    async ({ name, data }) => {
        return fetch('/payments', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                name,
                data,
            }),
        })
            .then((res) => res.json())
            .then((res) => res)
    },
)

但当我这样称呼它时

    dispatch(
        submitPaymentToServer({
            name,
            data,
        }),
    )

typescript 抱怨说我没有正确数量的参数。那么我该如何将参数传递给这个函数呢？或者使用工具包执行此操作的方法是什么？

Answer 1

这就是 React-Redux 在使用时所说的createAsyncThunk

当您调度 thunk 时，您只能将一个参数传递给它。如果需要传递多个值，请将它们传递到单个对象中

所以而不是

export const submitPaymentToServer = createAsyncThunk(
    'data/fetchAll',
    async ({ name, data }) => { // here you have two arguments
        return fetch('/payments', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                name,
                data,
            }),
        })
            .then((res) => res.json())
            .then((res) => res)
    },
)

你只能有一个论点：

export const submitPaymentToServer = createAsyncThunk(
    'data/fetchAll',
    async (yourData) => {
        const {name, data} = yourData;
        return fetch('/payments', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                name,
                data,
            }),
        })
            .then((res) => res.json())
            .then((res) => res)
    },
)

在调用中解构您的对象thunk。

参考：这里

Answer 2

您实际上需要为这些参数指定一个类型：

export const submitPaymentToServer = createAsyncThunk(
    'data/fetchAll',
     async ({ name, data }: { name: string, data: MyDataType }) => {
        return fetch('/payments', {

如果您仅在 IDE 中使用 JavaScript 和 TypeScript，则可以为此添加一个文档块：

export const submitPaymentToServer = createAsyncThunk(
    'data/fetchAll',
     async ({ name, data }: { name: string, data: MyDataType }) => {
        return fetch('/payments', {