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

Question

致电UML专家寻求有关javascript特定图表的帮助。

注意：反应，Flux Architecture，与所需的redux经验作出反应。

我需要有关如何表示反应应用程序（容器和子组件）的结构和行为的设计决策方面的帮助。使用Sparx企业架构师的目标是使用标准的UML设计，因此整个团队（许多人不熟悉该技术）可以理解发生的事情以及UI开发人员可以将其用于开发。

在我们确定了我们需要的UML类（React 组件）之后，容器，演示文稿视图以及我们仍在努力的行为用：

1. 似乎我们需要为每个主容器使用两个图来完全表示它，一个用于结构，一个用于行为？如果设计遵循惯例，我们是否需要行为图？

2. 结构图中的演示组件是否应显示已触发的事件或通过传递的向下回调调度到props的操作？ （例如，将按钮事件的操作注释为onClick或调用onClick将调用的操作）或两者。

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

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

5. 表示减速器是否正确 - 设置状态 - ＆gt;存储为＆lt; <信息流>和Store -mapStateToProps-＆gt;道具作为＆lt;依赖＆gt;？

6. 我们可以将组件propTypes作为类约束引用，还是创建一个接口？

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

谢谢

Answer 1

如前所述，我不能代表J部分，但仅适用于一般EA部分。

1. 如果您有外部解释的约定，则无需额外的行为解释（除非您想要了解您的UML知识）。

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

3. 是的，你可以。在EA中创建String SQL = "SELECT firstname from customer WHERE emailcolumn = email; ，您会看到一个允许创建action之类的菜单。

我无法回答4.和5.