10 tips for React Redux At Scale

À propos

Résumé :

10 tips for React Redux At Scale

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.


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 :


  1. 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.
  2. 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.
  3. 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.

  1. Structurer en module - Redux Ducks
    Regrouper action, middlewares et reducers en un seul fichier pour chaque module permet d’améliorer la clarté et la compréhension du code et suffit aux besoins d’une application de taille petite à moyenne. 
  2. 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).
  3. 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é.
  4. 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.
  5. 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.
  6. 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.
  7. 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 aimé, partagez !

À propos de...

No items found.
logo matters
Matters - Product & Startup Studio
Depuis 14 ans, on accompagne la stratégie, le développement et la croissance de vos produits et démarches d’innovation.