如何在 React 和 Redux 中复用一个组件？

Question

也许我没有理解正确的概念。我通常在示例中看到 Counter class 然后是 mapStateToProps 和 mapDispatchToProps，然后使用 connect 创建 "Higher Order Component" 和将其导出为默认值。

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

例如：

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

然后我恍然大悟：在实践中，我们实际上可以只定义 Counter.js 而没有所有这些 mapStateToProps、mapDispatchToProps 和 connect，以及然后我们将创建 IceCreamCounter.js 第一个 import Counter （普通计数器）并执行所有 mapStateToProps、mapDispatchToProps 和 connect 以使其成为一个 HOC 和出口吗？

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

同样，如果它是 "To Go Order" 页面，我们需要一个计数器来计算所需勺子的数量，那么我们实际上会有 mapStateToProps、mapDispatchToProps 和 connect 并创建一个 SpoonCounter.js:

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;

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

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

Answer 1

本身不是官方文档，而是来自相当 "official" 的来源。容器组件模式。这就是 post 让我喜欢上这个模式的原因。

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

在这里你偶然发现了它。 "dumb" 计数器组件是表示组件，visual 方面，UI，而在您的情况下，react-redux connect HOC returns "smart" 组件，它将有形数据（如您的应用程序状态）连接到演示组件。

如何在 React 和 Redux 中复用一个组件？

How to re-use a component in React and Redux?

reactjs

redux

react-redux

code-reuse