英文:
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
的信息。您传递的函数不符合预期的签名。
您当前的所有参数(id
、PKM
、SKM
等)应该合并为一个名为 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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论