javascript - 如何在 Redux 中实现缓存？

Question

如果我的商店中已有数据，我希望避免调用 API 两次。

如何使用 Redux 做到这一点？

Answer 1

在我看来，理想的解决方案是使用Reselect选择器( https://github.com/reactjs/reselect )。这是一个人为的示例:

import { createSelector } from 'reselect';

const getObjs = state => state.objs;
const currentObjId = state => state.currentObjId;

export const getObj = createSelector(
  [ currentObjId, getObjs ],
  (id, objs) => objs.get(href)
);

像这样使用:

import { getObj } from './selectors';

const ExampleComponent = ({obj}) => <div>{ obj.name }</div>;

const mapStateToProps = state => ({
  obj: getObj(state)
});

export default connect(mapStateToProps)(ExampleComponent);

第一次运行此命令时，将从所有 obj 列表中“选择”一个基于某些 id(也在状态中)的 obj 。下次，如果输入没有更改(请参阅重新选择文档以了解等效性的定义)，它将简单地返回上次的计算值。

您还可以选择插入不同类型的缓存，例如LRU。这有点先进，但非常可行。

Reselect 的主要优点是它允许您彻底优化，而无需在 redux 中手动维护额外的状态，如果对原始数据进行了更改，您就必须记住更新这些状态。 Timo 的答案很好，但我认为缺点是它不缓存昂贵的客户端计算(我知道这不是确切的问题，但这个答案是关于一般 Redux 缓存的最佳实践，适用于您的问题)，仅获取。您可以执行与 Timo 建议非常相似的操作，但合并重新选择以获得非常整洁的解决方案。在 Action 创建器中你可以有这样的东西:

export const fetchObj = (dispatch, getState) => {
  if (hasObj(getState())) {
    return Promise.resolve();
  }

  return fetchSomething()
    .then(data => {
      dispatch(receiveObj(data));
      return data;
    });
};

您将有一个专门针对 hasObj 的选择器，可能基于上述选择器(我在这里这样做专门是为了展示如何轻松地编写选择器)，例如:

export const hasObj = createSelector(
  [ getObj ],
  obj => !!obj
);

一旦你开始使用它与 redux 交互，即使对于简单的选择，在 mapStateToProps 中专门使用它也开始有意义，这样在将来，如果计算状态的方式发生变化，您不需要修改所有使用该状态的组件。一个示例可能是使用 TODO 数组来呈现多个不同组件中的列表。稍后在应用程序开发过程中，您意识到您希望默认情况下过滤 TODO 列表，仅显示不完整的列表。您在一处更改选择器即可完成。