Article original : The Most Important ESLint Rule for Redux Applications
Par Paul Matthew Jaworski
tl;dr Exécutez yarn add --dev eslint-plugin-import et ajoutez "import/named": 2 à vos règles .eslintrc pour éviter d'importer accidentellement des constantes qui n'existent pas dans vos reducers.
Si vous développez une application utilisant React et Redux, vos reducers ressemblent probablement à ceci :
Cet exemple est assez simple. Vous n'importez qu'une seule constante en haut.
Votre structure de fichiers ressemble actuellement à ceci :
.
actions| constants.js| index.js...omitted for brevity... reducers| accountReducer.js| index.js...omitted for brevity... indes.js index.html
Mais à mesure que votre base de code grandit, vos reducers deviendront plus compliqués. Organiser vos fichiers par type peut ne plus avoir de sens. Vous décidez donc de commencer à organiser les choses par fonctionnalité ou route :
.
actions| constants.js| index.js...omitted for brevity... reducers| index.js routes| accounts| | components| | containers| | module| | | actions.js| | | constants.js| | | index.js (exports our reducer)| | styles| | index.js| index.js...omitted for brevity... indes.js index.html
Super ! Maintenant, vous n'avez plus 100 composants dans votre dossier principal de composants. Les choses sont un peu plus ordonnées et plus faciles à comprendre.
Il y a un problème avec votre refactorisation, cependant. Soudain, cet import dans votre reducer fait référence à un chemin inexistant :
import { RECEIVE_ACCOUNT_SUCCESS } from '../actions/constants';
Vous obtenez une erreur concernant ce chemin non résolu immédiatement, alors vous le changez :
import { RECEIVE_ACCOUNT_SUCCESS } from './constants';
Cool. Mais que se passe-t-il si vous n'avez pas réellement défini cette constante dans votre nouveau fichier ?
Vous êtes sur le point de rencontrer l'un des bugs les plus frustrants possibles dans une application Redux — importer une constante non définie dans un reducer. Vos tests échoueront, votre application plantera, et vous vous cognerez la tête contre votre bureau jusqu'à ce que vous le compreniez.
Le problème est que ce type de bug échoue simplement en silence. Les imports ES6 ne se soucient pas de savoir si la variable que vous importez est définie ou non. Vous ne verrez jamais d'erreur à ce sujet.
ESLint à la rescousse !
La clé pour éviter ce type de bug est d'installer eslint-plugin-import, puis de définir une simple règle dans votre .eslintrc :
"import/named": 2
C'est tout ! Maintenant, vous obtiendrez une erreur chaque fois que vous essayerez d'importer une constante non définie dans l'un de vos reducers.
Édition : À moins que vous n'étendiez une configuration de base qui l'inclut déjà, vous devrez également ajouter "import" à la section des plugins de votre .eslintrc. Merci à Dave Mac pour avoir souligné cela !
Bon codage !