对于localStorage,你可以使用我的小插件: https://www.npmjs.com/package/localstorage-ttl
在应用程序状态中(内存中) - 触发操作以获取数据,并使用redux-thunk、redux-saga或类似工具进行调用并使用reducer将数据保存在store中。从store中检索数据。
https://github.com/gaearon/redux-thunk https://github.com/redux-saga/redux-saga
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import api from 'redux-cached-api-middleware';
import Dropdown from './Dropdown';
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.errorPayload} />;
if (result.successPayload) return <Dropdown items={result.successPayload} />;
return <div>No items</div>;
}
}
ExampleApp.propTypes = {
fetchData: PropTypes.func.isRequired,
result: PropTypes.shape({}),
};
const CACHE_KEY = 'GET/items';
const enhance = connect(
state => ({
result: api.selectors.getResult(state, CACHE_KEY),
}),
dispatch => ({
fetchData() {
return dispatch(
api.actions.invoke({
method: 'GET',
headers: { Accept: 'application/json' },
endpoint: 'https://my-api.com/items/',
cache: {
key: CACHE_KEY,
strategy: api.cache
.get(api.constants.SIMPLE_SUCCESS)
.buildStrategy(),
},
})
);
},
})
);
export default enhance(ExampleApp);
这个库只会从API获取一次数据,每次你调用 fetchData
时,它都会从缓存中返回数据,即使调用来自另一个组件。
这个库的设置如下:
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)
);
采用这种方法后,用户重新加载页面后所有的Redux状态都将丢失。如果您想保存该状态,可以选择redux-persist库将状态同步到localStorage
,并可能会使用不同的缓存策略来处理redux-cached-api-middleware
。
https://www.npmjs.com/package/reqmate
检查一下示例 const response = await reqmate
.get('https://jsonplaceholder.typicode.com/todos/1')
.setCaching(3000)
.send();
正如我的猜测,您正在使用redux进行状态管理。您想要缓存API调用以有效地控制状态更改,避免重新渲染组件、不必要的API调用并对移动用户友好(避免多次获取相同数据(未更改))。如果是这样->那么您可以使用现成的解决方案。
redux-cache.请访问下面的链接以获取更多信息,并简要探讨缓存机制->何时需要缓存数据以及何时需要删除缓存。