javascript - 使用 mapDispatchToProps 避免 no-shadow eslint 错误

Question

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

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 时出现一个非常常见的错误。也就是说，尝试调用原始的、未连接的操作(不会自动分派(dispatch))。

换句话说，如果您没有使用解构并从 Prop 中获取 Action ，setFilter() 将不会分派(dispatch) Action (因为您将调用直接导入的 Action ，而不是通过 props.setFilter() 通过 props 调用连接的 Action ，react-redux 会自动为您调度)。

通过清理 variable shadowing ，您和/或您的 IDE 更有可能发现错误。

怎么做？

将 eslintConfig 属性添加到您的 package.json 文件是 one way to do this .

"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 的 Action 。

为什么？

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

为什么不呢？

用 props/this.props 为你的所有 Action 添加前缀是重复的(如果你正在解构所有其他非 Action Prop ，则不一致)。

如何？

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

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

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

4。导入整个模块。

为什么？

简洁。

为什么不呢？

其他开发人员(或您 future 的自己)可能无法理解正在发生的事情。根据您遵循的风格指南，您可能会破坏 no-wildcard-imports rule .

怎么做？

如果您只是简单地从一个模块传入 Action 创建者:

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

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

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

如果您传入多个模块，请使用 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 简洁语法的偏好，那么不妨加入带有隐式返回的箭头函数:

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

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

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