Redux - 复杂图形的建模状态并触发多个更新和副作用以响应单个操作
Redux - Modeling state of a complex graph and triggering multiple updates and side-effects in response to a single action
问题
我正在尝试设计具有相当复杂状态的 Web 应用程序，其中许多单个操作应该触发多个组件的多个更改和更新，包括从外部端点异步获取和显示数据。
一些上下文和背景：
我正在构建一个混合 cytoscape.js / redux 应用程序，用于使用图表对蛋白质相互作用进行建模。
我的 Redux store 需要保存图形的表示（节点和边对象的集合），以及许多可以由用户设置的过滤参数（即只显示包含特定值的节点，等）。
当前的实现使用 React.js 来管理所有状态，随着应用程序的增长，它变得非常单一，难以推理和调试。
注意事项和问题
我以前从未使用过 Redux，因此在尝试从概念上设计新实现时遇到了一些困难。具体来说，我有以下问题/疑虑：
Cytoscape.js 是一个孤立的组件，因为它直接操纵 DOM。它期望状态（特别是节点和边集合）具有一定的形状，这是嵌套的并且有点难以处理。由于对任何节点或边缘对象的每次更新都应该以图形方式反映在 cytoscape 中，我应该在我的 Redux 存储中镜像它期望的形状，还是应该在每次更新时转换它？如果是这样，那么做这件事的好地方是什么？ mapStateToProps 还是在 reducer 中？
某些事件，例如选择节点 and/or 边缘，在整个应用程序中产生多个副作用（数据从服务器异步获取，其他数据从选择中提取并被转换/聚合，其中一些是派生的，一些来自外部 api 调用）。我无法思考应该如何处理这些变化。更具体地说，假设触发了 SELECTION_CHANGE 操作。它应该包含选定的对象，还是只包含它们的 ID？我猜从性能角度来看，ID 的负担会更小。更重要的是，我应该如何处理 SELECTION_CHANGE 操作所需的级联更新？单个 SELECTION_CHANGE 操作应触发 UI 和状态树的多个部分的更改。意思是触发跨不同减速器的多个动作。根据 SELECTION_CHANGE 进行批处理/排队/触发多个操作的好方法是什么？
用户需要能够根据任意谓词过滤和操作图形。更具体地说，他应该能够永久删除\添加节点和边，并将视图限制在图形的特定子集中。换句话说，一些更改是永久性的（删除\添加或以其他方式编辑图形），而其他更改仅与显示的内容有关（例如，仅显示表达水平高于特定阈值的节点等）。我应该在我的状态树中保留一个单独的、“过滤后的”图表副本，还是应该针对过滤参数的每次更改即时计算它？和以前一样，如果是这样，哪里是执行这些过滤操作的好地方：mapStateToProps、reducer 或其他我没有想到的地方？
我希望这些高层次和抽象的问题足以描述我想要实现的目标，如果没有，我会很乐意详细说明。
Redux 状态形状的推荐方法是尽可能保持状态最小，并根据需要从中获取数据（通常在选择器函数中，可以在组件的 mapState 和其他组件中调用地点，例如 thunk 动作创作者或传奇）。对于 nested/relational 数据，如果将其存储在规范化结构中并根据需要对其进行反规范化，效果最佳。
虽然你对你的行动投入多少取决于你，但我通常更喜欢将它们保持在相当小的水平。这意味着在 action creator 中查找必要的项目及其 ID，然后查找数据并在 reducer 中执行必要的工作。至于 reducer 处理，有几种方法可以解决。如果您要使用 "combined slice reducers" 方法，combineReducers 实用程序将为每个切片减速器提供响应给定操作的机会，并根据需要更新自己的切片。您还可以编写在状态树中更高级别运行的更复杂的 reducer，并根据需要自行执行所有嵌套更新逻辑（如果您使用 "feature folder" 类型的项目结构，这更常见）。无论哪种方式，您都应该能够通过一个分派操作为单个逻辑操作完成所有更新，尽管有时您可能希望连续分派多个连续操作以执行更高级别的操作（例如 UPDATE_ITEM -> APPLY_EDITS -> CLOSE_MODAL 来处理点击编辑弹出窗口 "OK" 按钮的问题 window).
我鼓励您通读 Redux 文档，因为它们涉及其中的许多主题，并指出其他相关信息。特别是，您应该阅读新的 Structuring Reducers section. Be sure to read through the articles linked in the "Prerequisite Concepts" page. The Redux FAQ also points to a great deal of relevant info, particularly the Reducers, Organizing State, Code Structure, and Performance 类别。
最后，还有几个其他相关链接。我在 https://github.com/markerikson/react-redux-links . Lots of useful info linked from there. I also am a big fan of the Redux-ORM 库中保留了大量关于 React、Redux 和相关主题的高质量教程和文章的链接，它提供了一个非常好的抽象层来管理 Redux 存储中的规范化数据，而无需尝试更改是什么让 Redux 如此特别。
问题
我正在尝试设计具有相当复杂状态的 Web 应用程序，其中许多单个操作应该触发多个组件的多个更改和更新，包括从外部端点异步获取和显示数据。
一些上下文和背景：
我正在构建一个混合 cytoscape.js / redux 应用程序，用于使用图表对蛋白质相互作用进行建模。
我的 Redux store 需要保存图形的表示（节点和边对象的集合），以及许多可以由用户设置的过滤参数（即只显示包含特定值的节点，等）。
当前的实现使用 React.js 来管理所有状态，随着应用程序的增长，它变得非常单一，难以推理和调试。
注意事项和问题
我以前从未使用过 Redux，因此在尝试从概念上设计新实现时遇到了一些困难。具体来说，我有以下问题/疑虑：
Cytoscape.js 是一个孤立的组件，因为它直接操纵 DOM。它期望状态（特别是节点和边集合）具有一定的形状，这是嵌套的并且有点难以处理。由于对任何节点或边缘对象的每次更新都应该以图形方式反映在 cytoscape 中，我应该在我的 Redux 存储中镜像它期望的形状，还是应该在每次更新时转换它？如果是这样，那么做这件事的好地方是什么？ mapStateToProps 还是在 reducer 中？
某些事件，例如选择节点 and/or 边缘，在整个应用程序中产生多个副作用（数据从服务器异步获取，其他数据从选择中提取并被转换/聚合，其中一些是派生的，一些来自外部 api 调用）。我无法思考应该如何处理这些变化。更具体地说，假设触发了 SELECTION_CHANGE 操作。它应该包含选定的对象，还是只包含它们的 ID？我猜从性能角度来看，ID 的负担会更小。更重要的是，我应该如何处理 SELECTION_CHANGE 操作所需的级联更新？单个 SELECTION_CHANGE 操作应触发 UI 和状态树的多个部分的更改。意思是触发跨不同减速器的多个动作。根据 SELECTION_CHANGE 进行批处理/排队/触发多个操作的好方法是什么？
用户需要能够根据任意谓词过滤和操作图形。更具体地说，他应该能够永久删除\添加节点和边，并将视图限制在图形的特定子集中。换句话说，一些更改是永久性的（删除\添加或以其他方式编辑图形），而其他更改仅与显示的内容有关（例如，仅显示表达水平高于特定阈值的节点等）。我应该在我的状态树中保留一个单独的、“过滤后的”图表副本，还是应该针对过滤参数的每次更改即时计算它？和以前一样，如果是这样，哪里是执行这些过滤操作的好地方：mapStateToProps、reducer 或其他我没有想到的地方？
我希望这些高层次和抽象的问题足以描述我想要实现的目标，如果没有，我会很乐意详细说明。
Redux 状态形状的推荐方法是尽可能保持状态最小，并根据需要从中获取数据（通常在选择器函数中，可以在组件的 mapState 和其他组件中调用地点，例如 thunk 动作创作者或传奇）。对于 nested/relational 数据，如果将其存储在规范化结构中并根据需要对其进行反规范化，效果最佳。
虽然你对你的行动投入多少取决于你，但我通常更喜欢将它们保持在相当小的水平。这意味着在 action creator 中查找必要的项目及其 ID，然后查找数据并在 reducer 中执行必要的工作。至于 reducer 处理，有几种方法可以解决。如果您要使用 "combined slice reducers" 方法，combineReducers 实用程序将为每个切片减速器提供响应给定操作的机会，并根据需要更新自己的切片。您还可以编写在状态树中更高级别运行的更复杂的 reducer，并根据需要自行执行所有嵌套更新逻辑（如果您使用 "feature folder" 类型的项目结构，这更常见）。无论哪种方式，您都应该能够通过一个分派操作为单个逻辑操作完成所有更新，尽管有时您可能希望连续分派多个连续操作以执行更高级别的操作（例如 UPDATE_ITEM -> APPLY_EDITS -> CLOSE_MODAL 来处理点击编辑弹出窗口 "OK" 按钮的问题 window).
我鼓励您通读 Redux 文档，因为它们涉及其中的许多主题，并指出其他相关信息。特别是，您应该阅读新的 Structuring Reducers section. Be sure to read through the articles linked in the "Prerequisite Concepts" page. The Redux FAQ also points to a great deal of relevant info, particularly the Reducers, Organizing State, Code Structure, and Performance 类别。
最后，还有几个其他相关链接。我在 https://github.com/markerikson/react-redux-links . Lots of useful info linked from there. I also am a big fan of the Redux-ORM 库中保留了大量关于 React、Redux 和相关主题的高质量教程和文章的链接，它提供了一个非常好的抽象层来管理 Redux 存储中的规范化数据，而无需尝试更改是什么让 Redux 如此特别。