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

Posted 2023-02-22

【中文标题】如何在 redux 工具包中将参数传递给 createAsyncThunk？

【英文标题】：How do you pass arguments to createAsyncThunk in redux toolkit?

【发布时间】：2021-02-20 20:20:18

【问题描述】：

所以我是 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 抱怨说我没有正确数量的参数。那么我应该如何将 args 传递给这个函数呢？或者使用工具包的方法是什么？

【参考方案1】：

你实际上需要给这些参数一个类型：

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

如果您仅在 IDE 中使用带有 TypeScript 的 javascript，您可以为此添加一个 docblock：

const thunk2 = createAsyncThunk(
  'data/fetchAll',
  /**  @param arg  name: string, data: MyDataType  */
  (arg) => 
    return fetch('/payments', 
  

【讨论】：

但是这个函数是一个js文件哈。我还是不明白它为什么抱怨？它不是在抱怨论点的类型，而是在抱怨奇怪的 args 数量

嗯，通常参数的数量是从类型派生的，备用类型是 TypeScript void，意思是“没有参数”。但这不应该发生在纯 JavaScript 中。您使用的是什么 IDE？

【参考方案2】：

这是 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 调用中解构您的对象。

参考：here