javascript - 使用 React 和 Redux 对来自 API 的特定于日期的结果进行分页

Question

我想使用 Redux 在我的 React 应用程序中显示一些新闻。

问题是我想显示各个日期的新闻，并且我想对新闻进行分页。

在我的 API 中我打印

{
  pagination: {
    count: 1000,
    size: 10,
    page: 1,
    pages: 100
  },
  news: [
    ..
  ]
}

我知道如何制作简单的分页，但我不知道如果我希望能够在我的应用中显示不同日期的新闻，API 应该如何工作。

直到现在(没有日期)，我只是在我的 Redux reducer 中保留了状态 news 和 pagination，然后检查页码是否等于总页数页面以确定是否应尝试加载更多新闻。

但现在我可能有很多不同的日期，而且我想将所有新闻保存在 Redux 存储中，我不知道如何构建它。

我可以保持我的 API 不变，因为使用 GET 参数 ?date=15-09-2017 进行过滤只会减少 API 结果中的新闻数量。

但是是否仍然可以将所有新闻保存在我的 reducer 中的 news 变量的数组中，还是我必须将其结构化为类似

news: {
  '15-09-2017': {
    news: [...],
    pagination: {}
  },
  ...
}

为了跟踪每个日期的分页？

Answer 1

我认为按 id 和每个日期的 id 存储新闻的结构会是一个很好且灵活的结构:

{
    "byId": {
        "10": { /* News */ },
        "14": { /* News */ },
        /* ... */
    },
    "listsByDate": {
        "2017-08-24": {
            "total": 100,
            "pageSize": 10,
            "page": 2,
            "items": [
                10,
                14,
                /* ... */
            ]
        }
    }
}

您可以为此结构实现简单的选择器:

const getNewsById = (state, id) => state.byId[id];

const getListByDate = (state, date) => state.listByDate[date];

const getPageOfList = (state, data) => getListByDate(state, date).page

/* ... */

const getNewsByDate = (state, date) => {
    return getListByDate(state, data).items.map((id) => {
        return getNewsById(state, id);
    });
}