衍生数据缓存

Reselect #

reselect 可以缓存状态树通过计算后得到的衍生数据. 这表示重复的改变和计算将变得更加高效, 可以用来高效地计算 redux store 里的衍生数据.

请查看官方文档来了解更多.

使用 #

我们可以创建 2 种不同的 selector: 简单 selector 和复杂 selector.

简单 selector #

简单 selector 仅仅做一件事情: 获取状态树, 并返回其中一个节点.

const mySelector = (state) => state.get('someState');

export {
  mySelector,
};

复杂 selector #

如果需要, 我们可以使用 createSelector 函数通过组合多个简单的 selector 来构建复杂 selector. 我们可以从其他文件中导入 selector, 并将它们作为 createSelector 的参数.

import { createSelector } from 'reselect';
import mySelector from 'mySelector';

const myComplexSelector = createSelector(
  mySelector,
  (myState) => myState.get('someNestedState')
);

export {
  myComplexSelector,
};

这些 selector 可以在 react 的 containers 中直接使用, 也可以再一次使用 createSelector 方法将它们组合起来形成一个嵌套数据.

export default connect(createSelector(
  myComplexSelector,
  (myNestedState) => ({ data: myNestedState })
))(SomeComponent);

添加一个新的 selector 文件 #

如果你已经有了一个 selectors.js 文件, 那么可以将上述 selector 添加到该文件中. 如果你还没有, 你可以通过以下模版创建一个到你的 container 文件夹.

import { createSelector } from 'reselect';

const selectMyState = () => createSelector(

);

export {
  selectMyState,
};