Question

例如，我有这样的组件结构：

<Parent>
      <Child_1>
            <InnerChild_1 />
      </Chidl_1>
      <Child_2>
            <InnerChild_2 />
      </Chidl_2>
</Parent>

组件<Parent>连接到redux。使用应用程序状态更新<InnerChild_1 />的更好方法是，使用<Parent>从props发送此数据还是将<InnerChild_1 />连接到redux？如果连接，我应该将所有使用状态的组件连接到redux吗？

Answer 1

尽管其他每一个答案都说明你应该connect你的顶级，但这确实是一个旧建议，只对非常简单的应用程序有用。

在需要的地方使用connect以使组件与Redux存储保持同步。在您的示例中，如果<Parent />未使用任何状态且其角色仅仅是组合，我就不会连接那个。我会保留Parent一个标准的React组件，并单独连接子项。

对于具有嵌套权限的大型列表或复杂数据结构，这是可行的方法。

如果您选择其他方式，并连接最顶层的组件，则任何状态更改将导致组件树的完全重新呈现，而不进行自动优化。由于connect ed组件将为您实现shouldComponentUpdate，因此通常可以将多个项目连接到商店，而不是连接“列表”父级并在每次更改时重新呈现每个项目时获得更好的性能。

请参阅Redux文档中的React-Redux常见问题解答： http://redux.js.org/docs/faq/ReactRedux.html#react-multiple-components

具体来说：

早期的Redux文档建议您只应该有一些组件树顶部附近的连接组件。然而，时间和经验表明，这通常需要一些组件要了解他们所有人的数据要求后代，迫使他们传递一些令人困惑的道具。

Answer 2

根据我的经验，您应该尽可能少地使用应用程序中的redux。根据经验，始终选择在组件链中传递道具，而不是在子组件中调度操作。对我来说，当你需要跨多个容器组件共享状态时，redux真正闪耀。典型的用例是电子商务应用程序中的身份验证/用户数据。在您的情况下，我可以肯定地说connect您的子组件只会导致不必要的间接。

Answer 3

恕我直言，connect更好地使用Containers而不是Components。

Container拥有组件。 connect redux州Container Components状态props又将状态发送到<Parent /> Container。

在您的情况下，您可以将var errors = notificationArray.map(function(message) { return message.severity === 'Error'; }); var warnings = notificationArray.map(function(message) { return message.severity === 'Warning'; }); var infos = notificationArray.map(function(message) { return message.severity === 'Information'; }); var sortedMessage = errors.concat(warnings).concat(infos);假设为{{1}}，将其余孩子视为组件。

Answer 4

您可以使用点差运算符（... props）或上下文。

Via spread看起来像这样：

<InnerChild_1 
    {...this.props}
/>

什么时候连接组件到redux反应？

4 个答案: