如何缓存API响应并在以后的react&redux中使用它？

Question

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

Answer 1

你可以缓存在HDD或RAM中.

• HDD =例如localStorage
• RAM =应用程序状态,例如redux store.

对于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的状态都将丢失，如果你想保存状态，你可以选择在此之后方法终极版-坚持库同步的状态localStorage和使用可能会使用不同的缓存策略的redux-cached-api-middleware。