Éviter l'erreur eslint no-shadow avec mapDispatchToProps

Question

J'ai le composant suivant qui déclenche un no-shadow Erreur ESlint sur la page FilterButton props .

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

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

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

Comment éviter l'avertissement tout en conservant 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. Utiliser les composants du conteneur

Pourquoi ?

Il s'agit d'un modèle connu et vous obtenez l'avantage supplémentaire de découpler vos composants du magasin redux, ce qui facilite leur réutilisation.

Pourquoi pas ?

Vous avez maintenant besoin de deux fichiers par composant.

Comment ?

// FilterButton.jsx

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

// FilterButtonRedux.jsx

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

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