Reactjs 使用 mapDispatchToProps 避免无阴影 eslint 错误

这里有四个选项:

1.禁用规则.

Why?

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

Why Not?

无阴影规则有助于防止使用react-redux时出现非常常见的错误.也就是说，试图调用原始的、未连接的操作(不会自动被调度).

换句话说，if you were not使用解构并从props 抓取动作，setFilter()不会发送动作(因为您将直接调用导入的动作，而不是通过props props.setFilter()调用连接的动作，后者react-redux会自动为您发送).

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

How?

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

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

2. Reassign the variable when passing it into connect().

Why?

你受益于无阴影规则的安全性，而且，如果你 Select 遵守命名约定，它是非常明确的.

Why Not?

它引入了样板.

如果您不使用命名约定，那么现在必须 for each 操作提供备用名称(仍然有意义).同样的动作很可能在不同的组件中被命名为不同的动作，这使得人们更难熟悉这些动作本身.

如果使用命名约定，名称将变得冗长且重复.

How?

没有命名约定:

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 destruct 动作.

Why?

不需要明确地使用"阴影"方法.

Why Not?

用props/this.props为你的所有动作做准备是重复的(如果你在分解所有其他非动作props ，则前后不一致).

How?

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

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

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

4.导入整个模块.

Why?

它很简洁.

Why Not?

其他开发者(或者你future 的自己)可能很难理解发生了什么.根据你所遵循的风格指南，你可能会突破no-wildcard-imports rule.

How?

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

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);

既然您在 comments 中提到了对ES6简明语法的偏好，那么不妨加入带有隐式返回的arrow函数:

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

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

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