如何在 React 和 Redux 中重用组件？答案

【问题标题】：How to re-use a component in React and Redux?如何在 React 和 Redux 中重用组件？
【发布时间】：2020-06-26 14:43:32
【问题描述】：

也许我没有正确理解这些概念。我通常在示例中看到一个Counter 类，然后是mapStateToProps 和mapDispatchToProps，然后使用connect 创建“高阶组件”并将其导出为默认值。

我想知道我们如何重用这个Counter 组件？

例如：

如果我们需要在同一页面上有两个 Counter 实例
如果我们需要第 2 页上的 Counter，并且它应该与另一个 redux 状态相关（不是我们在该原始文件中定义的那个）

然后我恍然大悟：在实践中，我们实际上可能只定义mapStateToProps、mapDispatchToProps 和connect 而没有所有这些IceCreamCounter.js，然后我们将首先创建IceCreamCounter.js @ 987654333@（普通计数器）并把所有的mapStateToProps、mapDispatchToProps 和connect 做成一个 HOC 并导出？

如果同一个页面需要另一个计数器，那么我们使用mapStateToProps、mapDispatchToProps和connect，例如DrinkCounter.js，并对redux存储进行适当的映射。

同样，如果它是“To Go Order”页面，并且我们需要一个计数器来计算所需勺子的数量，那么我们实际上将有 mapStateToProps、mapDispatchToProps 和 connect 并创建一个 @987654344 @：

import { connect } from 'react-redux';

import Counter from './Counter';  // the plain counter component

const mapStateToProps = ...;
const mapDispatchToProps = ...;

const SpoonCounter = connect(mapStateToProps, mapDispatchToProps)(Counter);
export default SpoonCounter;

这就是我们实现组件重用的方式？

我想知道为什么我以前没有看到这是如何完成的……它实际上在一些官方文档或博客中进行了解释吗？

【问题讨论】：

标签： reactjs redux react-redux code-reuse

【解决方案1】：

本身不是官方文档，而是来自相当“官方”的来源。容器组件模式。这是让我开始关注这种模式的帖子。

https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

在这里你偶然发现了它。 “哑”计数器组件是表示组件、视觉方面、UI，而在您的情况下，react-reduxconnect HOC 返回“智能”组件，它连接有形数据，就像您的应用程序状态一样，传递给演示组件。

【讨论】：

但是那篇文章提到“2019年的更新：我很久以前写过这篇文章，我的观点也发生了变化。特别是我不建议再这样拆分你的组件。如果你发现它在你的代码库中很自然，这种模式很方便。但我已经看到它在没有任何必要的情况下强制执行，而且几乎是教条式的热情太多次了。我发现它有用的主要原因是因为它让我将复杂的状态逻辑与其他逻辑分开组件的各个方面。Hooks 让我可以在没有任意划分的情况下做同样的事情”那么我们现在应该向北还是向西？
但是我认为我们仍然可以有一个组件来执行cSpoons = useSelector(state => state.countOfSpoons)，然后渲染一个<Count count={cSpoons}>，以便重用Count，我们也必须传递调度来改变它跨度>
@StefanieGauss 确定吗？不太清楚你是在问问题还是只是发表声明。 useSelector 钩子实质上替换了connect 高阶组件使用的mapStateToProps 函数。在您的示例中，Count 似乎仍然是一个“展示性”组件，它通过 count 道具显示。
我正在发表声明并试图获得一些验证。我想我发现 React / Redux 是我根本没有看到太多关于代码重用的讨论。如果是 3 个计数器，那么 Discord 中提到的人只需将计数器写 3 次，或者在 Redux 中使用大小为 3 的数组，然后 Counter 获取每个数组元素......它是如此紧密耦合
@StefanieGauss 好吧，如果是同一个计数器组件的 3 个实例，那么状态/UI 很可能在内部耦合，但是如果您需要 3 个单独的计数器，每个计数器都有自己的状态，那么您可以将状态选择器移到计数器组件之外并将状态传递给可重用组件，或使用 some 替代方案，例如分配id 并且每个计数器将自身注册到状态中以创建 its 状态。 react/redux 的代码重用是在可重用的、未连接的表示组件中，或者在可以在连接的组件之间共享的状态选择器函数中。