表示 react-redux 连接组件的 UML 图

Posted 2023-02-22

【中文标题】表示 react-redux 连接组件的 UML 图

【英文标题】：UML diagrams to represent react-redux connected components

【发布时间】：2017-04-03 17:10:47

【问题描述】：

请 UML 专家帮助布置 javascript 特定图表。

注意：react，Flux 架构，react 需要有 redux 经验。

我需要有关如何表示 React 应用程序（容器和子组件）的结构和行为的设计决策方面的帮助。使用 Sparx 企业架构师的目标是拥有标准的 UML 设计，以便整个团队（很多人不太熟悉该技术）可以了解正在发生的事情，并且 UI 开发人员可以使用它进行开发。

在我们确定了我们需要的 UML 类（React Components）、Containers、表示Views 以及我们仍在苦苦挣扎的行为之后与：

似乎我们需要为每个主容器使用两张图来完整地表示它，一张用于结构，一张用于行为？如果设计遵循约定，我们是否需要行为图？

结构图中的表示组件是否应该显示触发的事件或通过传递给 props 的回调分派的操作？ （例如，将 Button 事件的操作注释到 onClick 或 onClick 将调用的调度 action）或两者兼而有之。

我们可以说反应动作是信号吗？因为它们是普通的 js 对象，并且状态变化发生在 reducer 中，所以我们可能需要一个状态图？

根据上述决定，我们如何在图表中引用 Store 实例（我们有一个商店），我们应该在所有图表中引用 Store 实例还是只添加指向其的链接类图？

Reducers --Set State--> Store as 和 Store -mapStateToProps-> props 作为 表示是否正确？

我们可以将组件 propTypes 称为类约束或创建一个接口吗？

我找不到用 UML 设计的 javascript 应用程序的良好参考，除了一些用于部分可视化 Nodejs 模块的序列图。如果你有任何请发给我。

谢谢

【问题讨论】：

您的问题可能只针对非常少数的读者。我可以尝试回答其中的几个问题，但只能在一般情况下回答，因为您所说的听起来像是布朗博士发明的东西。

感谢您的评论 Thomas，我确实希望看到有经验的 ReactJs - Redux 在企业响应中使用。从 Sparx 的角度来看，您的宝贵答案/cmets 也可能会有所帮助。

我会尽量给出部分答案。

【参考方案1】：

如前所述，我不能代表 J 部分，而只能代表一般 EA 部分。

如果您有外部解释的约定，则不需要额外的行为解释（除非您想用您的 UML 知识大摇大摆）。

拥有上下文图总是一个好主意。在这些情况下，我所做的是创建一个复合图，显示中间的元素（最终以较粗的边框突出显示）以及围绕它排列的相关元素。

是的，你可以。在 EA 中创建一个action，您会看到一个允许创建Send Signal 等的菜单。

我无法回答 4. 和 5.

【讨论】：

感谢您的回答 Thomas，关于第一点，我们最终提供了一些解释的约定并将其链接到我们的图表，以避免在设计审查期间出现任何类型的通用解释。