Как вы передаете аргументы в createAsyncThunk в redux toolkit?

#javascript #reactjs #redux #redux-toolkit

Вопрос:

Итак, я новичок в 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 жалуется, что у меня нет нужного количества аргументов. итак, как я предполагаю передать аргументы этой функции? или как это сделать с помощью toolkit?

Ответ №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 вызова.

Ссылка: здесь

1. Это неверно. Деструктурированный объект в параметрах по-прежнему является всего лишь одним объектом / параметром. Не имеет значения, делаете ли вы это в () или в теле одно и то же логически. createAsyncThunk принимает только один параметр, но его не волнует ваша деструктуризация.

2. вау, для этого нужно просмотреть документы … спасибо

3. Это то же самое, деструктурирование объектов чтения…

Ответ №2:

На самом деле вам нужно присвоить этим аргументам тип:

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

Если вы используете JavaScript с TypeScript только в IDE, вы можете добавить для этого docblock:

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

1. но эта функция была файлом js ha. Я все еще не понимаю, почему он жаловался? он не жаловался на типы аргументов, он жаловался на количество аргументов, что было странно

2. Ну, обычно количество аргументов зависит от типов, резервным типом является TypeScript void , что означает «без аргументов». Но это не должно происходить с чистым JavaScript. Какую среду IDE вы используете?

Ответ №3:

Я нашел это в документации TypeScript Redux

 const fetchUserById = createAsyncThunk<
  // Return type of the payload creator
  MyData,
  // First argument to the payload creator
  number
>('users/fetchById', async (userId, thunkApi) => {
  const response = await fetch(`https://reqres.in/api/users/${userId}`, {
    headers: {
      Authorization: `Bearer ${thunkApi.extra.jwt}`,
    },
  })
  return (await response.json()) as MyData
})

Аргумент, переданный в createAsyncThunk userId , — это тот, который я определил с помощью type number .

Ответ №4:

Если вы используете typescript, подумайте о добавлении createAsyncThunk() типов в соответствии с документами. чтобы увидеть, работает ли это для вас, добавьте:

 createAsyncThunk
    <any, any, any>(...)

и не забывайте использовать правильную типизацию на основе:
https://redux-toolkit.js.org/api/createAsyncThunk