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

Question

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

注意:react、Flux Architecture、react with redux 需要经验。

我需要有关如何表示 React 应用程序(容器和子组件)的结构和行为的设计决策方面的帮助。使用 Sparx 企业架构师的目标是拥有标准的 UML 设计，以便整个团队(其中许多人对技术不是很熟悉)可以理解发生了什么，而且 UI 开发人员可以使用它进行开发。

在我们决定了我们需要的 UML 类(React Components)、Containers、表示 Views 以及我们仍在努力的行为之后与:

1. 貌似每个主要容器都需要用两张图来完整表示，一张结构图，一张行为图？如果设计遵循约定，我们还需要行为图吗？

2. 结构图中的表示组件是否应该显示触发的事件或通过传递给 props 的回调分派(dispatch)的操作？ (例如，将 Button 事件的操作注释为 onClick 或 onClick 将调用的调度 action)或两者。

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

4. 根据以上决定，我们如何在图表中引用 Store 实例(我们有一个商店)，我们应该在所有图表中引用 Store 实例还是只添加一个链接到它的类图？

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

6. 我们能否将组件 propTypes 称为类约束或改为创建接口(interface)？

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

谢谢

Answer 1

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

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

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

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

我无法回答 4. 和 5.