Debounced batching of requests

[markerikson]

Had a long discussion thread with a user on Reddit about the idea of "debouncing/batching" requests, which they're currently doing with sagas. From the description, it's roughly: dispatch multiple getPost actions, which get collected by the sagas and turned into a single getPost API call. This takes load off the backend.

Thread:

• https://www.reddit.com/r/reactjs/comments/x4dste/we_moved_a_large_reactjavascript_application_into/imxl7yv/

Example sandbox:

• https://codesandbox.io/s/rtk-sagas-7kq2gw

[codymurphyjones]

There was a small confusion in the reddit thread as to which feature you wanted me to create a codesandbox becuase I had mentioned 2 the source of truth across multiple lists and the debouncing batch idea, but it definitely seems like the batching feature is a solid idea.

The goal of this implementation was to enable me to utilize FlatList without giving up the utility of smart components. So it can dispatch its own updates, which update the redux store, and results in the data object for flatlist to recalculate and rerender. The implementation was built for compatibility with a specific React Native component, though I do think it has useful applications in any app for reducing api calls and still allowing self management from your components.

The general flow is that you load postings, which have their own loading responsibilities independent of each other.

The posting data is passed into a Posting component, which will consume the userId provided from the Posting props and pass it into a hook called useProfile. This hook will dispatch loadProfile with the userId, anytime the userId changes. It returns either a profile object or undefined, allowing you to implement your desired loading output.

Inside of loadProfile, we are firing off a side effect via redux-saga to begin the loadProfile process. We provide a small delay, to allow more items to aggregate before making the request. We pull a specified number of profiles, load them, verify they're in our response data and then remove from the loading list. The saga then checks if there are anymore profiles to load, and if so, fires off the loadProfile call with no parameters, which simply repeats the process using the list aggregated by loadProfile

https://codesandbox.io/s/rtk-sagas-debounce-9m289t