🤔 So what?

Let’s review a typical Redux process for a fetch operation:

1. Dispatch an Action fetchSomething() from within the Component
2. This Action hits the Reducer which will update the store with something like isLoading: true
3. The Component re-renders and displays a loader
4. In the meanwhile the Action hits the Middleware which takes care of calling the API
5. The API returns the response to the Middleware, which dispatches another Action: fetchSomethingSucceeded() when succeeded, or fetchSomethingFailed() when failed
6. The succeeded/failed Action hits the Reducer, which updates the store
7. Finally, the response is back to the Component (optionally through a memoized selector) which will show the data

It’s a long process for just a simple fetch, isn’t it?

const currentPage = // something calculated from ScrollPosition

const lastResult = usePageQuery(currentPage - 1, { skip: currentPage === 1 }) // don't fetch pages before 0
const currentResult = usePageQuery(currentPage)
const nextResult = usePageQuery(currentPage + 1)

const combined = useMemo(() => {
  const arr = new Array(pageSize * (currentPage + 1))
  for (const data of [lastResult.data, currentResult.data, nextResult.data]) {
    if (data) {
      arr.splice(data.offset, data.items.length, ...data.items)
    }
  }
  return arr
}, [pageSize, currentPage, lastResult.data, currentResult.data, nextResult.data])

// work with `combined` here