使用 Immutable.js 从 memoized 选择器返回纯 JS 对象

Returning plain JS object from memoized selector using Immutable.js

我正在开发 React + redux + Immutable.js + reselect 应用程序。我正在考虑在 reducer 和 sagas 中使用 Immutable.js 的设计,但不想将这个库与智能组件结合起来,所以我的应用程序的展示部分尽可能干净。

根据 redux 文档 your selectors should always return Immutable object

我的想法是在重新选择选择器和 return 纯 JS 对象中计算派生状态。如果我使用 memoized 选择器,如果 redux 状态的底层部分相同,则不会在每次调用时创建新对象,因此除非需要,否则我的组件不会被重新渲染。

我知道我会部分支付可组合性,因为选择器不能用作其他 Immutable.js-ready 选择器的输入,但我会得到更简洁的智能组件。

这种解决方案还有其他缺点吗?

为什么 redux 文档如此强烈鼓励将 Immutable 对象推送到智能组件?

Are the any other drawbacks of such solution?

toJS 是一项昂贵的操作,即使已记忆。争论是为什么 toJS 如果你不需要?

Why does redux documentation so strongly encourages to push Immutable object to smart components?

前面提到的,再加上它使整个 redux 管道的推理变得更容易,即状态的任何突变(effects/morphisms 侧)都更容易理解,因为有一个清晰的流程和发生变化的点。

综上所述,归根结底还是要看个人偏好以及人们对自己建筑中 bottlenecks/trade-offs 的感觉。如果您觉得在选择器中使用 toJS 时,干净的分离胜过 risks/caveats 的潜力,那么这就是您的体系结构的正确调用。

关于选择器中可组合性丧失的旁注,您总是可以有两个选择器,一个 returns 不可变状态——用于选择器组合,另一个使用不可变状态选择器和在适当的地方调用 toJS

Are the any other drawbacks of such solution?

toJS 成本高,调试应用程序也变得更加复杂。

Why does redux documentation so strongly encourages to push Immutable object to smart components?

  1. 不可变对象的验证比普通对象更深入。在 oldObject === newObject 验证的情况下,普通对象将在全局级别进行比较,而 oldImmutableObject === newImmutableObject 将进行更深入的比较。这在渲染树上更有效,避免了渲染 React 组件时不必要的更新。

  2. 使用辅助函数轻松修改对象。 getset 等等。

  3. 避免不必要的数据复制。