如何在 React 和 Redux 中复用一个组件?
How to re-use a component in React and Redux?
也许我没有理解正确的概念。我通常在示例中看到 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;
这就是我们实现组件重用的方式?
我想知道为什么我以前没有看到这是如何完成的...它实际上在某些官方文档或博客中有解释吗?
本身不是官方文档,而是来自相当 "official" 的来源。容器组件模式。这就是 post 让我喜欢上这个模式的原因。
https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
在这里你偶然发现了它。 "dumb" 计数器组件是表示组件,visual 方面,UI,而在您的情况下,react-redux
connect
HOC returns "smart" 组件,它将有形数据(如您的应用程序状态)连接到演示组件。
也许我没有理解正确的概念。我通常在示例中看到 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;
这就是我们实现组件重用的方式?
我想知道为什么我以前没有看到这是如何完成的...它实际上在某些官方文档或博客中有解释吗?
本身不是官方文档,而是来自相当 "official" 的来源。容器组件模式。这就是 post 让我喜欢上这个模式的原因。
https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
在这里你偶然发现了它。 "dumb" 计数器组件是表示组件,visual 方面,UI,而在您的情况下,react-redux
connect
HOC returns "smart" 组件,它将有形数据(如您的应用程序状态)连接到演示组件。