How to create a pagination in Redux from an array received by API

Question

I want to create a pagination for items received by the Hacker News API. The received data contains 500 story IDs and display the items 10 per page

To my knowledge, the API does not have a server-side pagination

So far, I fetch the data in redux

axios
      .get(`${API_URL}/topstories.json`)
      .then(response => {
        dispatch(getAllTopStoriesIsLoading(false));
        dispatch(getAllTopStoriesSuccess(response.data));

        const itemsPerPage = 10;
        const itemCount = response.data.length;
        const totalPages = Math.ceil(itemCount / itemsPerPage);
      })

I tried to set a for loop inside the .then

let startIndex = 0;
for (let i = 1; i <= totalPages; i + 1) {
  itemsOnPage = response.data.slice(startIndex, startIndex + itemsPerPage)
  startIndex += itemsPerPage;
}

This results in an infinite loop.

I would like to have items stored in the redux store as

pages: {
1: [ {...}, {...}, {...}],
2: [...],
...
}

or similar

Answer 1

Try this solution:

axios
  .get(`https://hacker-news.firebaseio.com/v0/topstories.json`)
  .then(response => {
    //dispatch(getAllTopStoriesIsLoading(false));
    let page = 1;
    const itemsPerPage = 10;
    const responData = {};
    response.data.map(item => {
      if (!responData[page]) {
        responData[page] = [];
      } else if (responData[page].length >= itemsPerPage) {
        current++;
        responData[page] = [];
      }
      responData[current].push(item);
    });
    console.log('===responData===', responData);
    //dispatch(getAllTopStoriesSuccess(responData));
  });