Paginate date-specific results from an API with React and Redux

user_2378710 0
Viewed 1407

I want to show some news in my React app using Redux.

The problem is that I want to show the news for individual dates and I want to paginate the news.

In my API I print

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

I know how to make a simple pagination, but I don't know how the API should work if I want to be able to show news for different dates in my app.

Until now (without dates), I have just kept a state news and pagination in my Redux reducer, and then checked if the page number equals the total number of pages to determine whether it should try loading more news.

But now that I potentially have many different dates and I want to keep all the news in the Redux store, I don't know how to structure it.

I can keep my API as it is, since filtering with GET parameter ?date=15-09-2017 will just decrease the number of news in the API result.

But would it still be possible to just keep all the news in an array in a news variable in my reducer or do I have to structure it to be something like

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

in order to keep track of the pagination for every single date?

react-redux redux react-native reactjs javascript
2 Answers

A think a structure where you store your your news by id and ids per date would be good and flexible structure:

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

You can implement simple selectors for this structure:

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