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

Question

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;
})

Answer 1

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.