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?
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?
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.
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.
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.
/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
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/
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.
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)
);