javascript - Redux - 复杂图形的建模状态并触发多个更新和副作用以响应单个操作

Question

问题

我正在尝试设计具有相当复杂状态的 Web 应用程序，其中许多单个操作应该触发多个组件的多个更改和更新，包括从外部端点异步获取和显示数据。

一些上下文和背景:

我正在构建一个混合 cytoscape.js/redux 应用程序，用于使用图形对蛋白质相互作用进行建模。

我的 Redux store 需要保存图形的表示(节点和边缘对象的集合)，以及许多可以由用户设置的过滤参数(即只显示包含特定值的节点等) .

当前的实现使用 React.js 来管理所有状态，随着应用的增长，它变得非常单一，难以推理和调试。

思考和问题

我以前从未使用过 Redux，在尝试从概念上设计新的实现时遇到了一些困难。具体来说，我有以下问题/疑虑:

1. Cytoscape.js 是一个独立的组件，因为它直接操作 DOM。它期望状态(特别是节点和边集合)具有一定的形状，这是嵌套的并且有点难以处理。由于对任何节点或边缘对象的每次更新都应该以图形方式反射(reflect)在 cytoscape 中，我应该在我的 Redux 存储中镜像它期望的形状，还是应该在每次更新时转换它？如果是这样，那么做这件事的好地方是什么？ mapStateToProps 还是在 reducer 中？

2. 某些事件，例如选择节点和/或边，会在整个应用程序中产生多种副作用(数据从服务器异步获取，其他数据从选择中提取并转换/聚合，一些其中一部分是派生的，其中一些来自外部 api 调用)。我无法思考应该如何处理这些变化。更具体地说，假设触发了 SELECTION_CHANGE 操作。它应该包含选定的对象，还是只包含它们的 ID？我猜从性能 Angular 来看，ID 的负担会更小。更重要的是，我应该如何处理 SELECTION_CHANGE 操作所需的级联更新？单个 SELECTION_CHANGE 操作应触发 UI 和状态树的多个部分的更改。意思是触发跨不同 reducer 的多个 Action 。根据 SELECTION_CHANGE 进行批处理/排队/触发多个操作的好方法是什么？

3. 用户需要能够根据任意谓词过滤和操作图形。更具体地说，他应该能够永久删除\添加节点和边，并将 View 限制在图形的特定子集中。换句话说，一些更改是永久性的(删除\添加或以其他方式编辑图形)，而其他更改仅与显示的内容有关(例如，仅显示表达水平高于特定阈值的节点等)。我应该在我的状态树中保留一个单独的、“过滤后的”图表副本，还是应该针对过滤参数的每次更改即时计算它？和以前一样，如果是这样，哪里是执行这些过滤操作的好地方:mapStateToProps、reducer 或其他我没有想到的地方？

我希望这些高层次和抽象的问题足以描述我想要实现的目标，如果没有，我会很乐意详细说明。

Answer 1

Redux state shape 的推荐方法是尽可能保持状态最小，并根据需要从中获取数据(通常在选择器函数中，可以在组件的 mapState 和其他位置，例如 thunk action creators 或 sagas)。对于嵌套/关系数据，如果将其存储在规范化结构中并根据需要对其进行反规范化，效果最佳。

虽然您对自己的行为投入多少取决于您自己，但我通常更愿意将它们保持在最低限度。这意味着在 action creator 中查找必要的项目及其 ID，然后查找数据并在 reducer 中执行必要的工作。至于 reducer 处理，有几种方法可以解决。如果您要使用“组合切片缩减器”方法，combineReducers 实用程序将使每个切片缩减器有机会响应给定操作，并根据需要更新自己的切片。您还可以编写在状态树中更高级别运行的更复杂的 reducer，并根据需要自行执行所有嵌套更新逻辑(如果您使用“功能文件夹”类型的项目结构，这更常见)。无论哪种方式，您都应该能够通过一个分派(dispatch)操作为单个逻辑操作完成所有更新，尽管有时您可能希望连续分派(dispatch)多个连续操作以执行更高级别的操作(例如 UPDATE_ITEM -> APPLY_EDITS -> CLOSE_MODAL 来处理点击编辑弹出窗口上的“OK”按钮)。

我鼓励您通读 Redux 文档，因为它们涉及许多这些主题，并指出其他相关信息。特别是，您应该阅读新的 Structuring Reducers部分。请务必阅读 "Prerequisite Concepts" 中链接的文章页。 Redux FAQ还指向大量相关信息，特别是 Reducers , Organizing State , Code Structure , 和 Performance类别。

最后，还有一些其他相关链接。我在 https://github.com/markerikson/react-redux-links 上保留了大量关于 React、Redux 和相关主题的高质量教程和文章的链接。 .从那里链接了很多有用的信息。我也是 Redux-ORM 的忠实粉丝库，它提供了一个非常好的抽象层来管理 Redux 存储中的规范化数据，而无需尝试改变 Redux 的特殊之处。