javascript - 我应该如何将 redux 与不会被重用的嵌套子组件一起使用？

Question

我正在开发一个包含许多子组件的组件，其中一些嵌套有 5 层。我对使用 redux 感兴趣，因为它具有在公共(public)状态原子中拥有单一事实来源的优势。

我不理解的是智能/dumb组件推荐，以及将提供程序置于主要组件之上并通过 props 传递所有内容。如果我这样做，那么我需要将 Prop 一直向下传递到第五个嵌套项，以便它可以进行回调以分派(dispatch)操作或查看仅它需要而不是其父项需要的状态。我知道这是为了代码重用，但子组件永远不会在主组件之外使用。这里推荐的解决方案是什么？还在用 Prop ？

注意:这个库的作者要求我们在 StackOverflow 上提问。我之所以提到这一点，是因为 SO 似乎将“最佳实践”问题标记为过于模糊。

Answer 1

虽然answer matt clemens 发布的内容确实在高层次上涵盖了这一点，但我会尝试在此处进行更深入的探讨。

您可以在任何级别使用connect()。这样做会使组件变得智能，因为它知道它的props 来自哪里。 dumb 组件只有 props，它们可以来自任何地方。智能组件耦合到 redux；dumb组件不是。

There are differing opinions on this approach , 但它受支持且有效。

在哪里画这条线完全取决于你，但让我们看一个例子。您有一些带有标准侧边栏组件、消息窗口和用于发送新消息的输入字段的聊天客户端。

+---------+--------------------------+
|         |                          |
|Sidebar  |  Messages window         |
|         |                          |
|         |                          |
|         |                          |
|         |                          |
|         +--------------------------+
|         |  New Message Entry     **|
|         |                          |
+---------+--------------------------+

所有这些的父级将使用 connect() 从 redux 获取数据并通过 props 将其提供给这些组件。现在想象一下，除了 new message entry 之外的那两个星号打开了一个设置面板(忽略愚蠢的位置，这是一个例子)。 new message entry 传递这些 props 真的有意义吗？不，它没有。

要解决这个问题，您可以创建一个特殊的“容器”，我们称它为 SettingsContainer，它使用 connect() 来获取它的 props，它所做的只是将它们传递下去到 SettingsPopup。 SettingsPopup 不会知道 redux，仍然可以正常测试/样式化/重用，新消息条目只需要知道 SettingsContainer，而不是它的任何依赖项.

这种方法可以很好地扩展，但有两个缺点。首先，像 SettingsContainer 这样的智能“包装器”组件必须由其他dumb组件使用。这使新消息输入组件的测试变得复杂。其次，顶级组件不再公开整个数据依赖关系图，这使得在不深入研究组件层次结构的情况下更难推理。

这些权衡是值得的，但您应该意识到它们。