我尝试将参数传递给API,但是在使用@reduxjs/toolkit时API没有接收到参数。

huangapple go评论52阅读模式
英文:

I'm trying to pass params to API, params aren't receiving in the API by using @reduxjs/toolkit

问题

I'm trying to implement scrollable pagination in react native using @reduxjs/toolkit, Initially, I'm calling an API in useEffect and It was dispatching the set of items, and then while scrolling I'm calling a function 'loadMoreItem' to dispatch, a new set of items while dispatching fetchLoadContent, I'm passing a set of params while calling the API but it wasn't receiving my params. I've double-checked the passing params are displaying correctly by consoling. But it wasn't receiving in the fetchLoadContent function. Instead, it says

//component
const loadMoreItem = () => {
dispatch(fetchLoadContent(
id,
keys.PKM,
keys.SKM,
keys.BelongsToLanguage,
keys.ContentCreatedAt
console.log(id, keys.PKM, keys.SKM,
keys.BelongsToLanguage, keys.ContentCreatedAt)
//By consoling here, Datas are displaying properly
))
}

//Slice reducer
export const fetchLoadContent = createAsyncThunk('loadContent', async (id, PKM, SKM, BelongsToLanguage, ContentCreatedAt) => {
console.log(id, PKM, SKM, BelongsToLanguage, ContentCreatedAt )// here, It was not receiving

const res = await fetch(URL + languages/${id}/recent-content?PKM=${PKM}&SKM=${SKM}&BelongsToLanguage=${BelongsToLanguage}&ContentCreatedAt=${ContentCreatedAt},
{
headers: {
'x-api-key': 'xxxxxxxx'
},
})
const results = await res.json();
return results;
})

英文:

I'm trying to implement scrollable pagination in react native using @reduxjs/toolkit, Initially, I'm calling an API in useEffect and It was dispatching the set of items, and then while scrolling I'm calling a function 'loadMoreItem' to dispatch, a new set of items while dispatching fetchLoadContent, I'm passing a set of params while calling the API but it wasn't receiving my params. I've double-checked the passing params are displaying correctly by consoling. But it wasn't receiving in the fetchLoadContent function. Instead, it says

> {"abort": [Function abort], "dispatch": [Function dispatch], "extra": undefined, "fulfillWithValue": [Function fulfillWithValue], "getState": [Function getState], "rejectWithValue": [Function rejectWithValue], "requestId": "W2M9L4Q43YiNsziN6ptm-", "signal": {}}

    //component 
     const loadMoreItem = () => {
        dispatch(fetchLoadContent(
            id,
            keys.PKM,
            keys.SKM
            keys.BelongsToLanguage,
            keys.ContentCreatedAt
            console.log(id, keys.PKM, keys.SKM, 
            keys.BelongsToLanguage, keys.ContentCreatedAt) 
            //By consoling here, Datas are displaying properly
        ))
    }
   
    //Slice reducer
    export const fetchLoadContent = createAsyncThunk('loadContent', async (id, PKM, SKM, BelongsToLanguage, ContentCreatedAt) => {
    console.log(id,PKM,SKM, BelongsToLanguage,ContentCreatedAt )// here, It was not receiving

    const res = await fetch(URL + `languages/${id}/recent-content?PKM=${PKM}&SKM=${SKM}&BelongsToLanguage=${BelongsToLanguage}&ContentCreatedAt=${ContentCreatedAt}`,
        {
            headers: {
                'x-api-key': 'xxxxxxxx'
            },
        })
    const results = await res.json();
    return results;
})

答案1

得分: 1

请查看 RTK 的 文档 以获取有关 createAsyncThunk 的信息。您传递的函数不符合预期的签名。

您当前的所有参数(idPKMSKM 等)应该合并为一个名为 arg 的对象,而第二个参数应该是一个由 RTK 自动传递的 thunkAPI 对象。

另外,如果您要处理大量的 API 工作,请考虑使用 RTK Query。它已内置在 RTK 中,可以更轻松地管理大型 API。

根据您的请求,以下是您的异步 thunk 定义的示例代码:

export const fetchLoadContent = createAsyncThunk('loadContent', async (arg, thunkAPI) => {
  const { id, PKM, SKM, BelongsToLanguage, ContentCreatedAt } = arg;

  const res = await fetch(URL + `languages/${id}/recent-content?PKM=${PKM}&SKM=${SKM}&BelongsToLanguage=${BelongsToLanguage}&ContentCreatedAt=${ContentCreatedAt}`,
  {
    headers: {
      'x-api-key': 'xxxxxxxx'
    },
  })

  const results = await res.json();
  return results;
});

// 在您的组件中使用:
dispatch(fetchLoadContent({
  id: something,
  PKM: something,
  SKM: something,
  BelongsToLanguage: something,
  ContentCreatedAt: something,
}));

如果您对官方文档有困难,我不确定这是否会有多大帮助,但希望这对您有所帮助。RTK 很强大(但文档非常完善),我建议您在尝试任何复杂的实现之前熟悉文档。

英文:

Please take a look at RTK's documentation for createAsyncThunk. The function that you're passing does not match the expected signature.

All of your current arguments (id, PKM, SKM, etc) should be condensed to a single arg object, and the second argument should be a thunkAPI object, which is automatically passed by RTK.

Additionally, if you're doing a lot of API work, consider using RTK Query. It's built into RTK, and makes managing large APIs much easier.

Per your request, here's an example of how your async thunk definition might look:

export const fetchLoadContent = createAsyncThunk('loadContent', async (arg, thunkAPI) => {
  const { id, PKM, SKM, BelongsToLanguage, ContentCreatedAt } = arg;

  const res = await fetch(URL + `languages/${id}/recent-content?PKM=${PKM}&SKM=${SKM}&BelongsToLanguage=${BelongsToLanguage}&ContentCreatedAt=${ContentCreatedAt}`,
  {
    headers: {
      'x-api-key': 'xxxxxxxx'
    },
  })

  const results = await res.json();
  return results;
});

// In your component:
dispatch(fetchLoadContent({
  id: something,
  PKM: something,
  SKM: something,
  BelongsToLanguage: something,
  ContentCreatedAt: something,
}));

I'm not sure how valuable this will be if you were having trouble with the official documentation, but hopefully it helps. RTK has a lot going on (but it's documented very well), and I would encourage you to familiarize yourself with the documentation before attempting any complex implementations.

huangapple
  • 本文由 发表于 2023年5月22日 21:59:26
  • 转载请务必保留本文链接:https://go.coder-hub.com/76306978.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定