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

Question

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

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

例如：

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

然后它突然出现在我身上：似乎在实践中，我们实际上可以只定义Counter.js而没有所有那些mapStateToProps，mapDispatchToProps和connect，然后我们首先创建IceCreamCounter.js ]（普通计数器），是否将所有import Counter，mapStateToProps和mapDispatchToProps都设为一个HOC并将其导出？

然后，如果同一页面需要另一个计数器，则我们在connect中使用mapStateToProps，mapDispatchToProps和connect，并进行到redux存储的适当映射。

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

SpoonCounter.js

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

我不知道为什么以前没有看到它是如何完成的……在某些官方文档或博客中是否真的进行了解释？

Answer 1

本身不是官方文档，而是来自相当“官方”的资料。容器组件模式。这是使我转向模式的帖子。

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;

这里您偶然发现了它。 “哑”计数器组件是表示组件，visual方面，UI，而在您的情况下，https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0react-reduxHOC返回“智能”组件，它连接有形数据，例如您的应用状态，到演示组件。