javascript - 我应该在域之后还是在应用程序 View 之后构建 Redux 商店？

Question

我正在努力思考 Redux 以及如何在 React Native 应用中实现它。

我明白了总体思路，我喜欢它。但我不太确定如何构建我的商店。我将尝试使用应用中的两个场景举例。

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

项目屏幕: 显示特定项目的所有字段的 ScrollView。项目对象可能非常大而且不是完全平坦的。例如，它包含一个指向图像的 UUID 数组。

那么，我应该有一个 reducer 来处理完整的“项目”，还是应该有一个用于 ProjectList 和一个用于 Projects 的 reducer？ IE。我应该考虑真实域还是应用中的 View /屏幕？

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

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

我宁愿使用 seamless-immutable，但我认为使用 SI 对大型列表进行这种部分更新不会比复制列表更快。

我很乐意听到与 UI 渲染和其他任务相比，性能将不是问题。这将使使用域结构变得轻而易举。

Answer 1

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

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

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

最后，我实际上刚刚开始为 Redux 文档创建一个新页面，该页面描述了构建 reducer 的最佳实践。编写和完善它需要一些时间，但您可能需要留意它。问题在 [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 文档现在包含一个 "Structuring Reducers" section ，其中包含有关此主题的各种信息。