reactjs - Redux : Where to place components using the store? 的原子设计

Question

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

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

Answer 1

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

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

atoms <= molecules <= organisms <= templates <= pages

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

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

使用 Redux 将为您在将来进行这些更改时提供更大的灵 active ，因为您不需要很好地嵌套和绑定(bind)代码。

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

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

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

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

除此之外，尽量让原子只在其中包含样式状态。然后将 Prop 从页面向下钻取到子组件。保留 parent “智能组件”和 child “dumb组件”。

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