reactjs - Redux 的原子设计：使用商店将组件放置在哪里？

Question

我有一个分子，它使用状态来控制使用商店的另一个 UI 元素的可见性。

应用时是否适合从任何地方使用商店，Atomic Design还是应该有一个地方/一层放置所有这些组件？

Answer 1

我在不同的项目中遇到过几次同样的问题，我有一些见解可能对一起使用原子设计和 redux 有用。

当您已经预先了解整个屏幕设计时，原子设计非常有用。当您已经知道布局或 UI 屏幕原型时，您可以轻松地开始使用基于提供的模型的原子设计。然后您可以创建原子设计文件夹以将您的组件放入其中：

原子 <= 分子 <= 有机体 <= 模板 <= 页面

使用原子设计时，您应该尝试将所有智能（共享状态和功能）保留在父组件中。这样你就不需要使用大量的 redux，因为你可以使用 props 将状态和函数传递给所有子节点，直到到达原子。

原子设计的问题在于，当您没有清楚地了解项目如何嵌套在另一个项目中时，您将来可能不得不更改设计，因此必须解开组件的“树”你以前创建的。

使用 Redux 将在未来进行这些更改时为您提供更大的灵活性，因为您不需要保持代码很好的嵌套和绑定。

我的建议是，如果您正在处理应该有大量布局更改的新项目，那么您应该在两种方法（原子设计的“树”形状和 redux 的灵活性）之间保持平衡。

因此，在与客户一起验证 MVP 或产品后，您将获得 UX 确认，然后开始重新考虑完全重构的可能性，朝着完全原子设计（“树形设计”）方法发展。

总结： 在这种情况下没有完美的架构，因为您还需要分析项目的复杂环境：是 MVP 验证还是企业重构。

如果你选择使用过多的 redux，你就会失去组织良好且捆绑的代码的美感。如果您选择使用过多的原子设计，您将失去快速更改的自由。

除此之外，尽量只保留原子内部的样式状态。然后从页面向下钻取道具到子组件。保持父母“智能组件”和孩子“愚蠢组件”。

并始终评估使用 redux 的必要性。但是，如果时间对您不利（可能会如此）并且如果项目处于验证阶段，那么也请使用更多的 redux。