社区首页 >问答首页 >React (w/ react redux)缓存选项

问React (w/ react redux)缓存选项
EN

Stack Overflow用户

提问于 2018-02-22 02:24:14

回答 3查看 2.9K关注 0票数 4

我正在构建一个应用程序，用户可以在其中登录并查看一些统计数据。

每个stat都是一个API调用的结果--想想一个有几个列的表，每个列都包含一个stat (只是一个数字)。

我注意到，每当组件被重新呈现时，API调用就会再次进行。这有主要的性能问题，因为可能需要几毫秒的时间才能显示stat。我如何：

( a)缓存此信息，使其持续存在，不需要在每次呈现时重新调用，b)使应用程序“知道”何时重新调用API，因为数据库中的stat已更新？

我目前正在使用Redux存储更明显的东西，比如用户正在查看的活动，但是有一个更好的方法来缓存这些统计数据，而不是为每个用户创建操作和还原器？

reactjs

caching

redux

react-redux

CDN&音视频通信出海专场

提供游戏出海、社交娱乐等方案，助力企业抢占出海市场

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-02-22 10:19:19

因为我正在使用Redux，所以这个问题的答案并不像我所希望的那么简单。利用上面的答案，我想出了解决办法。

首先，当组件挂载时，它执行一个API调用，然后触发一个动作，然后是还原器，然后更新存储。

其次，我像这样使用shouldComponentUpdate：

shouldComponentUpdate(nextProps){
    if(nextProps.value){
        return true
    }
    if(this.props.value){
        return false;
    }
    return true;
}

如果组件具有nextProps，则重新呈现.如果它已经有一个值，不要重新呈现，如果它没有(有道具)呈现。

我仍然使用componentDidMount()调用API，每次使用组件时都会有效地侦听，而呈现(或不呈现)的决定则由shouldComponentUpdate()方法做出。

票数 0

Stack Overflow用户

发布于 2018-02-22 02:42:34

( a)为了将数据缓存到localStorage中，Dan (redux的作者)观看这个视频

( b)为避免组件的重登，请使用shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState) {
  /**If no change in state return false*/
  return this.state.value != nextState.value;
}

这样你就可以停止不需要的再轮回了。

票数 3

Stack Overflow用户

发布于 2018-08-10 21: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)
);