将 Redux 状态传递给组件时的最佳实践答案

【问题标题】：Best practice when passing Redux state into components将 Redux 状态传递给组件时的最佳实践
【发布时间】：2017-05-31 08:30:56
【问题描述】：

我正在与其他几个开发人员一起开发一个 React + Redux 项目，我们无法就状态和操作在何处传递的最佳实践达成一致。

我的方法是拥有一个“容器”或“提供者”组件，它是父组件，所有必需的状态和操作都映射到状态并传递到子组件，从而创建单一的事实来源。然而，不利的一面是，您必须记住通过每个子组件向下传递操作和值，这可能很难遵循。

另一种开发人员方法是在堆栈中的任何位置，在需要它的每个组件上使用mapStateToProps。因此，如果一个向下三层或四层的子组件需要某种状态，他会在该组件上使用 mapStateToProps。他还将使用import 关键字直接导入动作创建者，而不是将它们称为道具。我不喜欢这种方法，因为您可能会多次注入状态，并且您无法在一个地方快速切换状态或操作。

我可以看到这两种方法各有优缺点，所以我只是想知道在何时何地将状态/动作注入到 React 组件堆栈中是否有明确的最佳实践。

【问题讨论】：

我倾向于 Jeremy 的回答，但对此并没有硬性规定，更多的是关于意见和你想如何组织事物。

标签： javascript reactjs redux

【解决方案1】：

我在一个相对较大的 Redux 代码库上工作，我们选择并且我喜欢的方法是您在 containers 组件上使用 mapStateToProps 的第二种方法，该组件调度动作并将渲染委托给哑组件。

您希望能够在许多地方重复使用它们，而不必传递状态。您的顶级 redux 状态仍然是事实来源，但 mapStateToProps 将允许您仅访问此容器中所需的状态部分。

Redux 文档做得非常好，看看吧，它推荐容器组件实现 mapStateToProps http://redux.js.org/docs/basics/UsageWithReact.html

【讨论】：

我完全同意容器组件上的 mapStateToProps 调度操作并将渲染委托给哑组件 +1。
那么使用容器组件说......在堆栈的一半是合法的吗？那么一个容器组件，它调用一个哑组件，它说……调用另一个容器组件？
是的！中途下降甚至一路下降。这个想法是，你可以在任何地方使用你的容器组件，并且它应该与它的环境无关，这就是 Redux 的美妙之处。

【解决方案2】：

连接到 Redux 的组件数量取决于您，但一般来说，连接的组件越多，性能越好。更多信息请查看Redux FAQ on connecting multiple components，以及我的博文Practical Redux, Part 6: Connected Lists, Forms, and Performance。

【讨论】：