web-dev-qa-db-ja.com

mapDispatchToPropsで影のないEslintエラーを回避する

FilterButtonpropsで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ルールの両方を維持しながら、警告を回避するにはどうすればよいですか？

警告を抑制するコメントを追加できることは知っていますが、すべてのコンポーネントに対してそれを行うことは冗長で退屈なように見えます。

javascriptreactjsreduxeslintreact-redux
48
Kerumen

ここには4つのオプションがあります。

1.ルールを無効にします。

なぜ？

ESLintエラーを回避する最も簡単な方法です。

なぜそうではないのですか？

影なしの規則は、_react-redux_を使用する際の非常に一般的なバグを防ぐのに役立ちます。つまり、未接続の未接続アクション（自動的にディスパッチされないアクション）を呼び出そうとします。

言い換えると、あなたがを使用していない場合（-===-）小道具からアクションを取得し、setFilter()はアクションをディスパッチしません（あなたのため_react-redux_が自動的にディスパッチするprops.setFilter()を介してpropsを介して接続されたアクションを呼び出すのではなく、インポートされたアクションを直接呼び出します。

variable shadowing をクリーンアップすることにより、あなたおよび/またはIDEがエラーを検出する可能性が高くなります。

方法は？

eslintConfigプロパティを_package.json_ファイルに追加するのは これを行う1つの方法 です。

_"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 rule を破っているかもしれません。

方法は？

1つのモジュールからアクションクリエーターを単に渡す場合：

_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);
_
131
jabacchetta

5番目のオプション：

5. eslintrcルールを介して特定の例外を許可します。

module.exports = {
  rules: {
    'no-shadow': [
      'error',
      {
        allow: ['setFilter'],
      },
    ],
  }
}

なぜ？

変数のシャドーイングは望ましくありませんが、特定のケースでは回避できません。

なぜ？

本当にコードベースで変数のシャドーイングを望まない。 ????

8
GollyJer

オプション番号6。

6.特定のコード行のes-lintルールを無効にします

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


// eslint-disable-next-line no-shadow
function FilterButton({ setFilter }) {
  return (
    <button onClick={setFilter}>Click</button>
  );
}

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

または

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


/* eslint-disable no-shadow */
function FilterButton({ setFilter }) {
/* es-lint-enable */
  return (
    <button onClick={setFilter}>Click</button>
  );
}

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

Es-lintルールを一時的に無効にする2番目の方法は、最初の方法とは異なり、複数行のコードに使用できます。より多くの引数を渡し、それらを複数行のコードに分割すると便利です。

なぜ？

これは、いくつかのユースケースに簡単で適切なオプションです（たとえば、チーム/組織は特定のes-lint設定を使用し、これらの設定を変更することは推奨されません）。コードの行でes-lintエラーを無効にしますが、mapDispatchToProps構文には影響せず、ルールはコードの行の外で完全にアクティブです。

なぜ？

そのような種類のコメントでコードを肥大化させることは望まないか、禁止されています。 es-lintの振る舞いに影響を与えることは望まないか、禁止されています。

5
bpalij