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选择器将数据传递给组件。

React / Redux：将mapStateToProps prop封装到无状态组件中的变量中

1 个答案: