使用mapDispatchToProps避免无阴影的错误

Question

我有以下组件会no-shadow在上触发ESlint错误FilterButton props。

import { setFilter } from '../actions/filter';


function FilterButton({ setFilter }) {
  return (
    <button onClick={setFilter}>Click</button>
  );
}

export default connect(null, { setFilter })(FilterButton);

如何在保持简洁语法mapDispatchToProps和ESlint规则的同时避免警告？

我知道我可以添加注释以禁止显示警告，但是对每个组件执行此操作似乎都是多余且乏味的。

Answer 1

这里有四个选项：

1.禁用规则。

为什么？

这是避免ESLint错误的最简单方法。

为什么不？

使用no-shadow规则有助于防止使用时出现非常常见的错误react-redux。也就是说，尝试调用未连接的原始动作（不会自动分派）。

换句话说， 如果您没有
使用分解并从道具中获取动作，则setFilter()不会分派动作（因为您将直接调用导入的动作，而不是通过props通过props调用关联的动作props.setFilter()，后者会react- redux自动为您分派）。

通过清除变量阴影，您和/或您的IDE更有可能发现错误。

怎么样？

向文件中添加eslintConfig属性package.json是执行此操作的一种方法。

"eslintConfig": {
    "rules": {
      "no-shadow": "off",
    }
  }

2.在将变量传递到时重新分配变量connect()。

为什么？

您将从无阴影规则的安全性中受益，并且，如果您选择遵守命名约定，则这非常明确。

为什么不？

介绍样板。

如果不使用命名约定，则现在必须为每个操作提供备用名称（仍然有意义）。而且，相同的动作在各个组件中的命名方式可能会有所不同，从而使人们更难以熟悉动作本身。

如果确实使用命名约定，则名称会变得很长且重复。

怎么样？

没有命名约定：

import { setFilter } from '../actions/filter';

function FilterButton({ filter }) {
  return (
    <button onClick={filter}>Click</button>
  );
}

export default connect(null, { filter: setFilter })(FilterButton);

使用命名约定：

import { setFilter, clearFilter } from '../actions/filter';

function FilterButton({ setFilterConnect, clearFilterConnect }) {
  return (
    <button onClick={setFilterConnect} onBlur={clearFilterConnect}>Click</button>
  );
}

export default connect(null, {
  setFilterConnect: setFilter,
  clearFilterConnect: clearFilter,
})(FilterButton);

3.不要破坏道具的动作。

为什么？

通过显式使用props对象之外的方法，您无需担心阴影。

为什么不？

用props/ 前置所有动作this.props是重复的（如果您要破坏所有其他非动作道具，则不一致）。

怎么样？

import { setFilter } from '../actions/filter';

function FilterButton(props) {
  return (
    <button onClick={props.setFilter}>Click</button>
  );
}

export default connect(null, { setFilter })(FilterButton);

4.导入整个模块。

为什么？

简明扼要。

为什么不？

其他开发人员（或您将来的自己）可能无法理解正在发生的事情。并且，根据您遵循的样式指南，您可能会违反no-wildcard-
imports规则
。

怎么样？

如果您只是从一个模块传递动作创建者：

import * as actions from '../actions/filter';

function FilterButton({ setFilter }) {
  return (
    <button onClick={setFilter}>Click</button>
  );
}

export default connect(null, actions)(FilterButton);

如果要传入多个模块，请使用具有REST语法的对象分解：

import * as filterActions from '../actions/filter';
import * as otherActions from '../actions/other';

// all exported actions from the two imported files are now available as props
function FilterButton({ setFilter, clearFilter, setOther, clearOther }) {
  return (
    <button onClick={setFilter}>Click</button>
  );
}

export default connect(null, { ...filterActions, ...otherActions })(FilterButton);

并且由于您在注释中提到了对ES6简洁语法的偏爱，因此不妨抛出带有隐式返回的arrow函数：

import * as actions from '../actions/filter';

const FilterButton = ({ setFilter }) => <button onClick={setFilter}>Click</button>;

export default connect(null, actions)(FilterButton);