[解決済み] mapDispatchToPropsでシャドウなしeslintエラーを回避する。

質問

次のようなコンポーネントがあり、それが 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のルールの両方を維持しつつ、警告を回避するにはどうしたらよいでしょうか？

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

どのように解決するのですか?

ここには4つの選択肢があります。

1. ルールを無効にする。

なぜですか？

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

なぜダメなのか？

no-shadow ルールは、非常に一般的なバグを防ぐのに役立ちます。 react-redux . つまり、生の、接続されていないアクション (これは自動的にディスパッチされません) を呼び出そうとすることです。

言い換えれば でなかった場合 を使用して、destructuring と props からアクションを取得することです。 setFilter() はアクションをディスパッチしません (インポートされたアクションを直接呼び出すことになるので、プロップを通じて接続されたアクションを呼び出すのとは対照的です)。 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);

複数のモジュールを渡す場合は オブジェクトの再構築と残りの構文 :

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