Évitez l'erreur eslint no-shadow avec mapDispatchToProps

Question

J'ai le composant suivant qui déclenche une erreur ESlint no-shadow sur les props de FilterButton.

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

function FilterButton({ setFilter }) {
  return (
    Click
  );
}

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

Comment puis-je éviter l'avertissement tout en conservant à la fois la syntaxe concise de mapDispatchToProps et la règle ESlint ?

Je sais que je peux ajouter un commentaire pour supprimer l'avertissement mais le faire pour chaque composant semble redondant et fastidieux.

Answer 1

Option 7...

7. Utilisez des composants conteneurs

Pourquoi?

C'est un modèle connu et vous bénéficiez de l'avantage supplémentaire de découpler vos composants du magasin redux, les rendant plus faciles à réutiliser.

Pourquoi pas?

Vous avez maintenant besoin de deux fichiers par composant.

Comment?

// FilterButton.jsx

export default function FilterButton({ setFilter }) {
  return (
    Cliquez
  );
}

// FilterButtonRedux.jsx

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

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