使用mapDispatchToProps避免无阴影的错误 [英] Avoid no-shadow eslint error with mapDispatchToProps

问题描述

我有以下组件会触发 FilterButton 无阴影 ESlint错误>道具。

I have the following component that triggers a no-shadow ESlint error on the FilterButton props.

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


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

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

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

How can I avoid the warning while keeping both the concise syntax of mapDispatchToProps and the ESlint rule?

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

I know I can add a comment to suppress the warning but doing it for every components seems redundant and tedious.

推荐答案

此处有四个选项：

为什么？

这是避免以下情况的最简单方法ESLint错误。

It's the easiest way to avoid the ESLint error.

为什么不呢？

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

The no-shadow rule helps to prevent a very common bug when using react-redux. That is, attempting to invoke the raw, unconnected action (which does not automatically get dispatched).

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

In other words, if you were not using destructuring and grabbing the action from props, setFilter() would not dispatch the action (because you'd be invoking the imported action directly, as opposed to invoking the connected action through props via props.setFilter(), which react-redux automatically dispatches for you).

通过清理可变阴影，您和/或您的IDE

By cleaning up variable shadowing, you and/or your IDE are more likely to pick up on the error.

如何？

添加错误的可能性更大。 package.json 文件的 eslintConfig 属性为一种方法。

Adding a eslintConfig property to your package.json file is one way to do this.

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

2。将变量传递到 connect（）时重新分配。

为什么？

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

You benefit from the safety of the no-shadow rule, and, if you choose to adhere to a naming convention, it's very explicit.

为什么不呢？

它引入了样板。

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

If you do not use a naming convention, you now have to come up with alternate names (that still make sense) for every action. And chances are that the same actions will be named differently across components, making it harder to become familiar with the actions themselves.

如果您确实使用了命名约定，则名称会变成

If you do use a naming convention, names become long and repetitive.

如何？

没有命名约定：

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对象之外的方法，您无需担心阴影。

By explicitly using the method off of the props object, you don't need to worry about shadowing to begin with.

为什么不呢？

使用 props / this.props 来执行所有操作

Prepending all of your actions with props/this.props is repetitive (and inconsistent if you're destructuring all of your other non-action 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-导入规则。

Other developers (or your future self) may have trouble understanding what's going on. And depending on the style guide you're following, you might be breaking the no-wildcard-imports rule.

如何？

如果只需从一个模块中传递动作创建者即可：

If you're simply passing in action creators from one module:

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

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

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

如果要传递多个模块，请使用使用其他语法进行对象分解：

If you're passing in multiple modules, use object destructuring with rest syntax:

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简洁语法的偏爱，因此不妨抛出箭头具有隐式返回的函数：

And since you mentioned a preference for ES6's concise syntax in the comments, might as well throw in the arrow function with an implicit return:

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

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

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

这篇关于使用mapDispatchToProps避免无阴影的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！