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

Question

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

注意：反应，Flux体系结构，反应所需的redux经验。

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

在确定了我们需要的UML类（React Components），Containers，presentation Views以及我们仍在努力的行为之后：

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

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

3. 我们可以说反应动作是信号吗？由于它们是普通的js对象，并且状态变化发生在化简器中，所以也许我们需要一个Statechart图？

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

5. 将Reducers --Set State->存储为<信息流>和将-mapStateToProps->道具表示为<依赖项>是否正确？

6. 我们能否将proppropTypes组件称为类约束或创建接口？

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

谢谢

Answer 1

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

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

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

3. 是的你可以。在 EA 中创建一个action，然后您会看到一个菜单，允许您创建一个Send Signal或类似的内容。

我无法回答4和5。