reactjs - 如何从 API 接收的数组在 Redux 中创建分页

Question

我想为 Hacker News API 收到的项目创建一个分页。接收到的数据包含 500 个故事 ID，每页显示 10 个项目

据我所知，API 没有服务器端分页

到目前为止，我在 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);
      })

我试图在.then中设置一个 for 循环

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

这会导致无限循环。

我想将项目存储在 redux 商店中

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

或类似的

Answer 1

试试这个解决方案：

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