35

I would like to avoid calling an API twice if I already have the data in my store.

How do I do this with Redux?

2
  • 2
    The SO mods usually frown upon "what is the best way" questions. It is stupid I know, but if you change that to say, "How do I do this" it will be more likely to not get closed. Right now it's flagged as a candidate for being closed because it is "primarily opinion-based"
    – Serj Sagan
    Mar 23, 2017 at 16:54
  • We have written a lib for just this! github.com/JumboInteractiveLimited/redux-cache you set a TTL for your cache time and then it will debounce actions that update the reducer Sep 8, 2017 at 10:24

6 Answers 6

16

The ideal solution to this in my opinion is to use Reselect selectors (https://github.com/reactjs/reselect). Here is a contrived example:

import { createSelector } from 'reselect';

const getObjs = state => state.objs;
const currentObjId = state => state.currentObjId;

export const getObj = createSelector(
  [ currentObjId, getObjs ],
  (id, objs) => objs.get(href)
);

Used like this:

import { getObj } from './selectors';

const ExampleComponent = ({obj}) => <div>{ obj.name }</div>;

const mapStateToProps = state => ({
  obj: getObj(state)
});

export default connect(mapStateToProps)(ExampleComponent);

The first time you run this, one obj based on some id (also in the state) will be "selected" from the list of all objs. The next time, if the inputs have not changed (look at reselect documentation for the definition of equivalence) it will simply return the computed value from last time.

You also have the option to plug-in a different type of cache, e.g. LRU. That's a bit more advanced, but very doable.

The major advantage of Reselect is that it allows you to cleanly optimise without manually maintaining extra state in redux that you would then have to remember to update if a change to the original data was made. Timo's answer is good, but I would argue that the weakness is that it doesn't cache expensive client side computation (I know this wasn't the exact question, but this answer is about best practice redux caching in general, applied to your problem), only fetching. You can do something very similar to what Timo suggests, but incorporate reselect for a very tidy solution. In an action creator you could have something like this:

export const fetchObj = (dispatch, getState) => {
  if (hasObj(getState())) {
    return Promise.resolve();
  }

  return fetchSomething()
    .then(data => {
      dispatch(receiveObj(data));
      return data;
    });
};

You would have a selector specifically for hasObj potentially based on the above selector (I do so here specifically to show how you can compose selectors easily), like:

export const hasObj = createSelector(
  [ getObj ],
  obj => !!obj
);

Once you start using this to interface with redux, it starts to make sense to use it exclusively in mapStateToProps even for simple selects so that at a future time, if the way that state is computed changes, you do not need to modify all of the components which use that state. An example of this might be something like having an array of TODOs when is used to render a list in several different components. Later in your application development process you realise you want to filter that list of TODOs by default to only ones that are incomplete. You change the selector in one place and you are done.

16

Don't reinvent caching, just leverage the HTTP cache.
Your code should be practically unaware of the caching mechanism.
Simply make the http request when you need the data, it doesn't matter if it is through redux thunks, promises, etc or directly without redux.
The HTTP cache will do the caching for you.
Of course for this to work you need to properly configure your server to set the appropriate caching parameters and validity.

12

I'm assuming you are using async actions to handle your API calls.

This is the place where I would put the caching logic, which results in a nice encapsulation:

export function fetchData(url) {   
    return function (dispatch) {
        dispatch(requestData(url))

        if (isCached(url)) {
            const cachedData = getCached(url)
            dispatch(receiveData(url, cachedData))
        } else {
            return fetch(url)
              .then(response => response.json())
              .then(json => {
                  dispatch(receiveData(url, json))
                  setCached(url, json)
              })
        }
    }
}

Implementing isCached, getCached and setCached for your local storage should be rather straightforward.

4
  • But if I don't want/need to save the data in local storage, I only need the data for the current session?
    – ng2user
    Mar 26, 2017 at 4:12
  • 1
    The "local storage" referred to here is redux, not some persistent browser store. I think that is what you were asking anyway.
    – dpwr
    Apr 4, 2017 at 1:05
  • But in this solution, I am duplicate the data in my store and in memory (if I don't use local storage)
    – ng2user
    Apr 18, 2017 at 7:47
  • 2
    This may work to cache urls, but it doesn't cache data. For instance, say I have had some other call at some point that retrieved a list of users (e.g. from URL /api/users?someQuery=foo. Now I need to get a user; that user may or may not be in the list, but knowing whether or not /api/users?someQuery=foo is cached doesn't tell me that. Only looking at the actual store will tell me that. Jul 8, 2017 at 20:46
9

I came up with the same problem, where I wanted to add a cache layer between my action and reducer. My solution was to create a middleware, to cache the Request action before it goes to the actual thunk, which request data from the API.

Doing this has a pros that you don't need to modify your existing action and reducer. You just add a middleware. Here is how the middleware look like:

const cache = store => next => action => {
  // handle FETCH action only
  if (action.type !== 'FETCH') {
    return next(action);
  }

  // check if cache is available
  const data = window['__data'];
  if (!data) {
    // forward the call to live middleware
    return next(action);
  }
  return store.dispatch({ type: 'RECEIVE', payload: { data: `${data} (from cache)` } });
}

export default cache;

Try out the live demo at https://stackblitz.com/edit/redux-cache-middleware or check out my blog post for more info http://www.tonnguyen.com/2018/02/13/web-programming/implement-a-cache-middleware-for-redux/

2
  • why do you say has a "cons" - did you mean "drawback aka con", and did you actually mean "benefit? I'd see it as a benefit that you can make application wide changes in one place in the middleware.
    – zero_cool
    Sep 14, 2018 at 21:58
  • Really sorry, I meant pros. Edited the post.
    – Ton Nguyen
    Sep 16, 2018 at 16:10
5

A simple and fast way to do it (although not recommended for anything scalable):

Use redux-persist to persist (cache) the store. Whenever it rehydrates, you know the data you had previously is present - read the docs in the link for how it works and how to setup.

To avoid unnessecary data-fetches on the remote server, you can cache the URLs (as Timos answer) to the localStorage or such, and simply check for its existence before doing the actual fetch.

Action:

    function fetchUsers(url){
        if(isCached(url)) {
            // The data is already in the store, thanks to redux-persist.
            // You can select it in the state as usual.
            dispatch({ type: 'IS_CACHED', payload: url })
        } else {
            return fetch(url)
                   .json()
                   .then((response) => {
                       dispatch({ type: 'USERS_FETCH_SUCCESS', payload: response.data })
                       setCached(url)
                   })
                   .catch((error) => {
                       dispatch({ type: 'USERS_FETCH_FAILED', payload: error })
                   })
        }
    }

Simple custom-cache for urls:

const CACHE_NAME = 'MY_URL_CACHE'

export function getUrlCache() {

    var localStorage
    try {
        localStorage = window.localStorage
        // Get the url cache from the localstorage, which is an array
        return ( localStorage.getItem(CACHE_NAME) ? JSON.parse(localStorage.getItem(CACHE_NAME)) : [] )
    } catch(e){
        // Make your own then...
        throw "localStorage does not exist yo"
    }
}

export function isCached(url) {
    var urlCache = getUrlCache()
    return urlCache.indexOf(url) !== -1
}

export function setCached(url){ 
    if( isCached(url) )
        return false

    var urlCache = getUrlCache()
    urlCache.push(url)

    localStorage.setItem(CACHE_NAME, urlCache)

    return true
}

export function removeCached(url){
    var myCache = getUrlCache()
    var index = myCache.indexOf(url)
    if(index !== -1){
        myCache = myCache.splice(index, 1)
        localStorage.setItem(CACHE_NAME, urlCache)
        return true
    } else {
        return false
    }
}

You would also need to remove the cached url when/if the redux-persist data is flushed or some other thing that makes the data "old".

I recommend doing the whole thing using the redux store with persisting, and rather model the reducer/action logic on it. There are many ways to do it, and I highly recommend exploring redux, redux-saga and redux-persist and common concepts/design patterns.

Sidenote on basic example: You can also use redux-persist-transform-expire transformer for redux-persist to let cached data expire at some point in time, and modify it to remove the relevant cached url while doing so.

3

I built a library specifically for this - redux-cached-api-middleware.

An example usage, where successful response would be cached (re-used from store) for 10 minutes:

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import api from 'redux-cached-api-middleware';
import Items from './Items';
import Error from './Error';

class ExampleApp extends React.Component {
  componentDidMount() {
    this.props.fetchData();
  }

  render() {
    const { result } = this.props;
    if (!result) return null;
    if (result.fetching) return <div>Loading...</div>;
    if (result.error) return <Error data={result.payload} />;
    if (result.payload) return <Items data={result.payload} />;
    return <div>No items</div>;
  }
}

ExampleApp.propTypes = {
  fetchData: PropTypes.func.isRequired,
  result: PropTypes.shape({}),
};

const enhance = connect(
  state => ({
    result: api.selectors.getResult(state, 'GET/my-api.com/items'),
  }),
  dispatch => ({
    fetchData() {
      return dispatch(
        api.actions.invoke({
          method: 'GET',
          headers: { Accept: 'application/json' },
          endpoint: 'https://my-api.com/items/',
          cache: {
            key: 'GET/my-api.com/items',
            strategy: api.cache
              .get(api.constants.CACHE_TYPES.TTL_SUCCESS)
              .buildStrategy({ ttl: 10 * 60 * 1000 }), // 10 minutes
          },
        })
      );
    },
  })
);

export default enhance(ExampleApp);

You can pass a caching strategy or your custom shouldFetch function to determine when the resource should be re-fetched (docs).

The library uses redux-thunk (for async actions) and redux-api-middleware (for invoking APIs) as peer dependency, and the setup fairly simple:

import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { apiMiddleware } from 'redux-api-middleware';
import api from 'redux-cached-api-middleware';
import reducers from './reducers';

const store = createStore(
  combineReducers({
    ...reducers,
    [api.constants.NAME]: api.reducer,
  }),
  applyMiddleware(thunk, apiMiddleware)
);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.