Question

在我的基于React的应用程序中，有一个rest API调用，它可以一次性获取整个页面所需的所有数据。响应具有可用于下拉群体的数据。但我不确定如何实现这一目标。每当选择下拉值时，我正在发出新请求。请建议我如何有效地实施它，而不会进行多次不必要的休息呼叫。

Answer 1

您可以缓存在HDD或RAM中。

HDD =例如localStorage的
RAM =应用程序状态，例如redux商店。

对于localStorage ，您可以使用我的小插件： https://www.npmjs.com/package/localstorage-ttl

在应用状态（RAM） - 触发获取数据的操作，使用redux-thunk，redux-saga或类似方法进行调用，并使用reducer保存数据。从商店中检索数据。

https://github.com/gaearon/redux-thunk https://github.com/redux-saga/redux-saga

Answer 2

您可以选择一个redux-cached-api-middleware（免责声明：我是该库的作者），这是专门为此类情况而设计的。

以下是一个适合您情况的示例：

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使用不同的caching strategy。

Answer 3

正如我猜测你正在使用redux进行状态管理。并且您希望缓存api调用以进行有效的控制状态更改，以避免重新呈现组件，不必要的API调用以及对移动用户友好（多次避免fetchig相同数据（未更改））。如果是这样 - ＆gt;然后你可以使用现成的解决方案。

redux-cache。请访问以下链接以获取更多信息并简要调查缓存机制 - ＆gt;当你需要缓存数据时以及何时需要逐出缓存。

https://github.com/JumboInteractiveLimited/redux-cache

How do I implement caching in Redux?

Answer 4

如果您可以控制 API，则可以对其进行调整，以便缓存响应。 https://web.dev/http-cache/

如何缓存API响应并在以后的反应和使用中使用它终极版？

4 个答案: