How to load more items with fetchCollection?

[Thymo]

I would like to make an infinite scrolling table.
What is the best way to use redux-crud-store to append data to a collection with a load more action?

[devvmh]

Woah, interesting question.

The load more action has gotta be FETCH, if you're going to use existing r-c-s code.

I can see two ways as i brainstorm from here

1. Custom selector. Dont change anything in the store or reducers, and write a selector that aggregates multiple pages from a collection. I.e.

collections: [
  { params: { page: 1 }, ids: [1, 2] },
  { params: { page: 2 }, ids: [3, 4] },
  { params: { page: 3 }, ids: [5, 6] }
]

Write a selector that gets all 6 records. You can copy patterns from src/selectors.js.

2. Custom reducer. The other way would be to write your own reducer that appends ids to an infinite scroll list on certain fetch success actions. This is more work, since you'll probably need to write a selector as well. But in theory as the page got larger the other way could get slow.

Either way, for huge page sizes, you'll probably want a custom selector to only load the data you need from the store (i.e. if you have 1 million rows but only 20 are visible, just select the 20 records from the store).

Good luck! Let me know if you want me to review your code at all. And if you get a solution you like please submit a PR! Even if its just a md file documenting the approach, it would be great to share the pattern out. The point of this lib is to save developers time so I'd love to support getting a common infinite scroll pattern defined :)

[julienR2]

Great idea ! I'd love to see some experiment about this !

[devvmh]

I'm closing this issue; feel free to re-open or open a new issue if you have more questions