3-cache-api-calls.md

Cache API calls

This example shows how re-reselect can be used not as a selector but to cache API calls in a typical Redux scenario.

A working proof of concept can be found here.

Thanks to @greggb for the idea and the demo.

page/api.js

import { createCachedSelector } from 're-reselect';
import fetchFromApi from './api';

const fetchPageWithCache = createCachedSelector(
  pageId => pageId,
  // Return and retain a Promise as a result
  pageId => fetchFromApi(pageId),
)(
  /*
   * Re-reselect resolver function.
   * Cache a new selector for each new "pageId"
   */
  pageId => pageId,
);

export fetchPageWithCache;

page/actions.js

import {fetchPageWithCache} from './api';

actionFetchPage(pageId) {
  return (dispatch) => {
    dispatch({ type: 'REQUEST_PAGE', pageId });

    // Get cached resolved promise and dispatch result
    return fetchPageWithCache(pageId)
      .then(
        result => dispatch({
          type: 'RECEIVE_PAGE', success: true, pageId, payload: result,
        }),
        error => dispatch({
          type: 'RECEIVE_PAGE', success: false, pageId, payload: error,
        }),
        /*
         * On error we might also opt for removing the matching cache entry
         * in order to refetch the page on future requests:
         * fetchPageWithCache.removeMatchingSelector(pageId);
         */
      );
  };
},

export actionFetchPage;