React/Redux:将mapStateToProps普罗普斯封装到无状态组件中的变量中

Question

我有一个 React 组件，它多次调用 Redux 选择器函数。我希望通过将函数调用存储在变量中并在组件中使用它来进行重构。这是为了避免在渲染组件时多次调用同一函数，而不是通过将组件存储到变量中来仅调用一次。

在我的代码中，我使用dataLayerName来存储我的选择器函数：getDataLayerName。我注意到dataLayerName的值正在记录函数调用，而不是存储中的实际值。

// Code edited for brevity
const COOKIE = 'cookie';
const dataLayerName = ({ getDataLayerName }) => getDataLayerName;
const HowItWorksItem = ({
getTranslations,
getDataLayerName,
}) =>
<div>
<div>
{getTranslations({
title: 'Title 1',
cookie: COOKIE,
dataLayerName,
})}
</div>
<div>
{getTranslations({
title: 'Title 2',
cookie: COOKIE,
dataLayerName,
})}
</div>
</div>
</Cell>;
const mapStateToProps = state => ({
getDataLayerName: selectDataLayerName(state, COOKIE),
});
export default connect(mapStateToProps)(HowItWorksItem);

Answer 1

对于您正在做的工作，我推荐两个文件 - 一个用于选择组件所需的数据，另一个用于基于您的数据渲染 DOM 元素。我认为这将极大地澄清您的代码。

此外，您发布的代码也存在一些问题。首先，选择器应该是状态的函数。假设getDataLayerName是在其他地方定义的有效选择器，您应该能够在容器(获取数据的文件)中使用它，如下所示：

HowItWorksItemContainer.js

import HowItWorksItem from './HowItWorksItem.js'
import { getDataLayerName } from './selectors.js'
function mapStateToProps(state) {
const dataLayerName = getDataLayerName(state);
return { dataLayerName };
}
export default connect(mapStateToProps)(HowItWorksItem);

作为旁注，我个人认为 Redux 选择器应该有一个标准的后缀，例如我会称它为dataLayerNameSelector而不是getDataLayerName。但这完全取决于你。

接下来，要将HowItWorksItem(s)呈现给 DOM。我假设您只想渲染一个带有两个标题的HowItWorksItem(如您发布的代码)。如果你想要两个HowItWorksItems，你可以在父组件中创建两个HowItWorksItemContainers，如下所示：<HowItWorksItemContainer title='Title 1' />。

您的 DOM 也存在一个问题：有一个结束</Cell>标记，但没有开始标记。现在我只是省略了它，但您也可以添加一个开头<Cell>。

import React from 'react';
import getTranslations from './utilities';
const COOKIE = 'cookie';
function HowItWorksItem(props) {
return (
<div>
<div>
{getTranslations({
title: 'Title 1',
cookie: COOKIE,
props.dataLayerName,
})}
</div>
<div>
{getTranslations({
title: 'Title 2',
cookie: COOKIE,
props.dataLayerName,
})}
</div>
</div>
);
}

希望这个答案能让你清楚地了解使用 Redux 选择器将数据传递给你的组件。