Question

我无法弄清楚我是否可以在本地缓存api调用，这样当我关闭应用程序并重新启动它时它仍然存在。

在Redux的this页面上，我看到可以像这样缓存中间件：

  loadData(userId) {
    // Injected into props by React Redux `connect()` call:
    let { dispatch, posts } = this.props

    if (posts[userId]) {
      // There is cached data! Don't do anything.
      return
    }

    // Reducer can react to this action by setting
    // `isFetching` and thus letting us show a spinner.
    dispatch(loadPostsRequest(userId))

    // Reducer can react to these actions by filling the `users`.
    fetch(`http://myapi.com/users/${userId}/posts`).then(
      response => dispatch(loadPostsSuccess(userId, response)),
      error => dispatch(loadPostsFailure(userId, error))
    )
  }

我应该使用它吗？关闭应用后缓存是否仍然存在？

Answer 1

我们可以使用 Redux Persist 库来保存redux商店。默认情况下，此库将保留整个redux存储。但在您的情况下，您只需要保留一些API调用。您需要做的是，将所有必须保留的商店添加到whitelist，如下所示。

 persistStore(
    store, {
        storage: AsyncStorage,
        whitelist: ['user','some_other_reducer'],
    }, onComplete);

您可以通过facebook推荐f8App，了解有关如何设置redux persist的实现细节。

Answer 2

如前所述，redux-persist会将同步状态与离线存储同步。要将您的API请求保存到状态，您需要实施该请求。或者，您可以使用纯粹为此创建的库之一，例如。 redux-cached-api-middleware（免责声明，我是该软件包的作者）。

下面是获取一些数据并使缓存有效10分钟的示例：

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);

*请注意，不会在10分钟后删除API响应，但是只有在缓存已过期的情况下，调用this.props.fetchData();方法时才会从端点重新获取。

是否可以使用react native / redux缓存api请求？

2 个答案: