Dans ce Matters Meetup à San Francisco et présenté en anglais, Baptiste Manson partage ses 10 conseils clés sur l’utilisation de React Redux au sein d’une équipe d’une vingtaine de développeurs, après 2 ans d’expérimentation dans la réalisation de projets au contact de startups.
Équipe Matters
Vous pouvez également retrouver plus d’informations dans l'article lié qu’il a rédigé sur le sujet, également en anglais.
Cette présentation n’est pas une introduction à Redux et n’en explique donc pas les concepts.
Sans plus attendre, voici donc les 10 points relevés par Baptiste dans cette vidéo
Former son équipe La documentation officielle ainsi que les vidéos et articles du co-créateur de Redux, Dan Abramov, sont d’un grand renfort pour former les développeurs à la prise en main de l’outil. La lecture du code de Redux est aussi un prérequis si vous souhaitez comprendre en profondeur le fonctionnement du framework.
Bien s’outiller L’extension Redux DevTools est une grande aide pour débugger mais aussi pour mieux comprendre la manière de fonctionner de Redux : un réel avantage lors de l’apprentissage.
Utiliser un créateur d’action
Une même action peut être appelée à de nombreux endroits, l’architecture du code peut donc rapidement devenir complexe. L’utilisation d’une fonction qui permet de générer des actions offre de multiples avantages, par exemple celui de pouvoir définir une API d’interaction avec nos composants.
Structurer en module - Redux Ducks Regrouper action, middlewares et reducers en un seul fichier pour chaque modulepermet d’améliorer la clarté et la compréhension du code et suffit aux besoins d’une application de taille petite à moyenne.
Ecrire des tests unitaires - TDD Même si l’utilisation systématique de tests unitaires en front n’est pas nécessairement une bonne pratique, Redux s’y prête plutôt bien. Au point qu’il peut même se révéler efficace d’user de TDD (Test Driven Development).
Utiliser des actions fondées sur le payload Regrouper plusieurs actions en une seule simplifie le code, au lieu de définir une API explicite avec une action par champ. Par exemple, les fonctions editName et editEmail, peuvent être remplacées par la fonction edit dont le payload définit le champ impacté.
Gestion des effets de bord (side-effects) Redux n’est pas conçu pour gérer les effets de bord, qui sont au cœur des développements front-end. Si la documentation officielle recommande redux-thunk, redux-saga est selon nous une meilleure option.
Normaliser les states Pour éviter la duplication des références et à l’instar de la gestion d’une base de données, la normalisation du state permet de faciliter l’édition de données.
Les sélecteurs sont d’une grande aide Un sélecteur agit comme une “colle”, il permet de lier un state à un composant, il facilite ainsi le développement.
Typer avec Flow L'utilisation de typage, avec Flow dans notre cas, permet d’améliorer la qualité du code et d’aider à sa compréhension.
Vous avez un projet ? Une suggestion ? Un mot doux ?
