如何避免使用 redux 对计算属性进行潜在的昂贵重新计算

Question

假设我在 redux 商店中有 animals。它是一个规范化的对象，键是 id，值是对象本身。每只动物都有一把钥匙is_dog。

animals: {
    'id1': { location: 'foo', is_dog: true, name: 'Dog1' },
    'id2': { location: 'foo', is_dog: false, name: 'Cat1' },
    'id3': { location: 'foo', is_dog: false, name: 'Cat2' },
    'id4': { location: 'foo', is_dog: true, name: 'Dog2' },
}

我有一个 DogsList 连接的反应组件，它查看存储状态并将 dogIds 的数组传递给 UI 组件。 dogIds 的计算类似于：

dogIds = _.chain(state.animals).filter('is_dog').map('id').value();

在上面的示例中，这将 return ['id1', 'id4'].

但是，假设我有数千只动物，并且每只动物都有其他经常变化的属性，例如 currentLocation、lastFed 等。我知道 dogIds 只会change if is_dog changes if is_dog changes for any animal，但我不太确定如何不对任何动物的每次更改进行不必要的过滤和映射计算。我尝试使用 reselect，但我认为在这种情况下它真的没有帮助。

我倾向于将 dogIds 存储在 redux 中，并仅在相关时手动更新它。就像在 animals 中添加了一只新狗，或者一只猫变成了一只狗（我的类比在这里崩溃了）。但是我觉得将计算属性保存在 redux 存储中是我做错了什么。

Answer 1

也许您可以考虑使用 React 的生命周期方法，例如 shouldComponentUpdate - 在这里您可以评估是否 newDogIDs !== oldDogIDs 然后仅在它们不同时才执行操作。

如何避免使用 redux 对计算属性进行潜在的昂贵重新计算

How to avoid potentially expensive re-calculating of computed properties with redux

reactjs

redux

reselect