React (w/ react redux)缓存选项
我正在构建一个应用程序，用户可以在其中登录并查看一些统计数据。
每个stat都是一个API调用的结果--想想一个有几个列的表，每个列都包含一个stat (只是一个数字)。
我注意到，每当组件被重新呈现时，API调用就会再次进行。这有主要的性能问题，因为可能需要几毫秒的时间才能显示stat。我如何：
( a)缓存此信息，使其持续存在，不需要在每次呈现时重新调用，b)使应用程序“知道”何时重新调用API，因为数据库中的stat已更新？
我目前正在使用Redux存储更明显的东西，比如用户正在查看的活动，但是有一个更好的方法来缓存这些统计数据，而不是为每个用户创建操作和还原器？
回答 3
Stack Overflow用户
发布于 2018-02-22 18:19:19
因为我正在使用Redux，所以这个问题的答案并不像我所希望的那么简单。利用上面的答案，我想出了解决办法。
首先，当组件挂载时，它执行一个API调用，然后触发一个动作，然后是还原器，然后更新存储。
其次，我像这样使用shouldComponentUpdate：
shouldComponentUpdate(nextProps){
if(nextProps.value){
return true
}
if(this.props.value){
return false;
}
return true;
}如果组件具有nextProps，则重新呈现.如果它已经有一个值，不要重新呈现，如果它没有(有道具)呈现。
我仍然使用componentDidMount()调用API，每次使用组件时都会有效地侦听，而呈现(或不呈现)的决定则由shouldComponentUpdate()方法做出。
Stack Overflow用户
发布于 2018-02-22 10:42:34
( a)为了将数据缓存到localStorage中，Dan (redux的作者)观看这个视频
( b)为避免组件的重登，请使用shouldComponentUpdate
shouldComponentUpdate(nextProps, nextState) {
/**If no change in state return false*/
return this.state.value != nextState.value;
}这样你就可以停止不需要的再轮回了。
Stack Overflow用户
发布于 2018-08-11 05:50:02
本质上，您需要处理redux减速器中的每个获取操作。这就是为什么(在实现了几次缓存之后)，我决定发布一个库(redux-缓存-api-中间件)，专门为在这种情况下提供帮助而设计的(在redux-api中间件上它是一个很薄的包装)。您只需为每个请求考虑唯一的缓存密钥即可。
下面是一个示例组件，它从API中获取项并使用10分钟的缓存策略(这意味着如果您试图在缓存有效时调用API，那么它只会从缓存中返回数据)：
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.errorPayload} />;
if (result.successPayload) return <Items data={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.CACHE_TYPES.TTL_SUCCESS)
.buildStrategy({ ttl: 10 * 60 * 1000 }), // 10 minutes
},
})
);
},
})
);
export default enhance(ExampleApp);库的设置如下：
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)
);https://stackoverflow.com/questions/48924982
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号