我应该在域之后还是在应用程序视图之后构建 Redux 存储



我正在尝试围绕 Redux 以及如何在 React Native 应用程序中实现它。

我明白了大致的想法,我喜欢它。但我不太确定如何构建我的商店。我将尝试用应用程序中的两个场景举一个示例。

项目列表屏幕:使用 ListView 组件生成的项目列表。每行公开每个项目对象中的大约 5 个字段。

项目屏幕:显示特定项目的所有字段的滚动视图。项目对象可以很大,不能完全平坦。例如,它包含指向图像的UUID数组。

那么,我应该有一个化简器来处理完整的"项目",还是应该有一个化简器用于项目列表,一个化简器用于项目? 即我应该考虑真实领域还是应用程序中的视图/屏幕?

我怀疑答案将是模仿域。但是,如果列表中有 1000 个项目怎么办?我需要将 1000 个项目加载到商店中,包括每个项目的所有字段。但我只需要其中五个字段来呈现 ListView。只有几个项目可能会完全加载,因为用户不会在ProjectScreen中打开所有1000个项目。一个项目中的更改将强制复制 while 数组以保持不可变。

我不想陷入过早的优化,但我想从一开始就让商店的结构变得正确。我知道我可以使用 Immutable.js 来优化列表中项目的更新,但这会给我非 JS 对象来处理,这感觉有点麻烦。

我宁愿使用无缝不可变,但我不认为这种大型列表的部分更新使用 SI 会比复制列表更快。

我很想听到与UI渲染和其他任务相比,性能将不是问题。这将使使用域结构变得不费吹灰之力。

域,绝对。 您的商店结构应完全反映您正在使用的实际数据。 然后,UI 层应基于每个组件执行所需的任何转换,主要是在mapStateToProps函数中。 专注于构成应用程序核心的操作和行为。 (这也应该导致更好的测试设置。

组织嵌套或关系数据的最佳做法是对其进行规范化,类似于数据库中的表。 我已经写了一些先前的答案,在某种程度上描述了这个概念,并链接到一些进一步的文章和讨论([0],[1],[2])。

我通常建议不要使用不可变.js,至少一开始是这样。 它有其用途,如果您的应用程序配置正确,它可以提供一些性能改进,但也有许多潜在的性能陷阱 ( [3])。 我建议坚持使用普通的JS对象。 有多种方法可以以不可变的方式使用这些方法。 我有一个描述这些方法的文章列表([4]),以及一个可以使普通JS对象的不可变使用更容易的库列表([5])。

最后,我实际上刚刚开始为 Redux 文档开发一个新页面,该页面描述了构建化简器的最佳实践。 编写和润色需要一些时间,但您可能需要密切关注它。 问题在 [6],它有一个指向我当前 WIP 文章分支的链接。

[0] https://stackoverflow.com/a/38105182/62937
[1] https://stackoverflow.com/a/38017227/62937
[2] https://stackoverflow.com/a/37997192/62937
[3] https://github.com/markerikson/react-redux-links/blob/master/react-performance.md#immutable-data
[4] https://github.com/markerikson/react-redux-links/blob/master/immutable-data.md
[5] https://github.com/markerikson/redux-ecosystem-links/blob/master/immutable-data.md
[6] https://github.com/reactjs/redux/issues/1784

编辑:

作为后续,Redux 文档现在包括一个"结构化化简器"部分,其中包含有关此主题的各种信息。

最新更新