Flux+React.js - Caching API request responses

Question

I need input from someone experienced with React+Flux+async API requests pattern. What will be the better way to cache api response in the following situation:

• I have 3 lists pages of articles each with corresponding API endpoint to fetch data.

• each article has details page UI but there's no articleById endpoint, so I just .find necessary article by id in the fetched array

• I want to make only 1 request on the list and cache it, so when I go to the details page from the list or return back to the list there will be no API requests.

• When I switch to another list I should make the request and cache it.

I'm wondering should I cache the response in WebAPIUtils service which makes actual requests?

Or is it better to hack container component (which is the same for all 3 lists) in a way to know whether it should fire action which starts API request?

Thanks!

Answer 1

Using Stores

You should have ListStore that caches the lists that handles the following action: LIST_CACHE : this action pushes a List to the List cache.

In your List component, when it receives an update from the ListStore, try to find the List that it's supposed to display and set that in its state.

If the list isn't there, wait for the ListStore to emit a change event, then in the ListStoreChanged handler, try to find the list again.

Now you need to decide on when to make the API request for the list cache. One possible option is making the API request for all the lists when your app loads, and then dispatching all the received Lists to the LIST_CACHE action.

If you haven't already, read this: http://facebook.github.io/flux/docs/overview.html