PREAMBULE
Depuis quelques temps, React a introduit la notion des Hooks. Il s’agit d’une approche (presque) totalement différente de ce qu’on a pu connaître jusqu’à présent où Redux régnait, et règne encore d’ailleurs. Notamment dans la gestion de notre état et des lifecycles. Et comme beaucoup, j’apprécie fortement cette “nouvelle” façon de faire avec les Hooks. Cela permet d’éviter toute la complexité de Redux mais aussi d’obtenir un code beaucoup plus modulaire.
React Hooks inclus des puissantes primitives, comme useReducer, useState ou encore useContext pour gérer l’état global de notre application React. Alors, est-il inutile de devoir passer par une nouvelle librairie tierce pour gérer notre état ?
LES PROBLÈMES QUE JE RENCONTRE SANS LIBRAIRIE TIERCE
Instinctivement, la réponse à la question précédente est oui, et c’est vrai. Cependant, on peut vite se retrouver dans un “goulot d’étranglement” au fur et à mesure que notre projet gagne en complexité et en fonctionnalités.
En effet, il faut alors une parfaite connaissance des Hooks et s’affranchir d’une rigueur sans pareille pour limiter les dégâts si nous voulons éviter que notre application devienne rapidement une “usine à gaz”. C’est d’autant plus vrai lorsque des bogues apparaissent ! Il est souvent laborieux de les identifier rapidement, bien que React travaille de plus en plus à proposer des outils de débogages particulièrement robustes.
Hélas, par manque de temps et pour améliorer ma productivité, je me suis mis à la recherche d’une solution alternative aux Hooks pour gérer l’état global de mon application react-native. Et ne voulant pas revenir à Redux pour conforter malgré tout l’utilisation des Hooks (bien que Redux ait toujours sa place dans l'écosystème React), je sentais que mon projet justifiait de plus en plus d’adopter définitivement un système d’état plus robuste.
C’est là que j’ai découvert une librairie tierce (encore une) : easy-peasy ! Une fois n’est pas coutume, certains d’entre vous me demanderont pourquoi ne pas refaire confiance à Redux ? Tout simplement car j’avais le désir de découvrir de nouvelles façons de travailler avec React et je voulais perfectionner mon utilisation des nouvelles API Hooks. Donc c’est avant tout pour “me mettre à jour” mais aussi parce que j’aime ce code facilement maintenable que ces nouvelles API proposent.
Dans mes recherches, certaines librairies sortaient également du lot : MobX/Mobx State Tree, Rematch ou encore React Easy State. Toutes ont leurs avantages et leurs inconvénients, chacun aura son avis sur le sujet.
En ce qui me concerne, aucune ne regroupait tout ce dont j’avais besoin en même temps : flux de données unidirectionnel, outils de débogage, extensibilité, peu de configuration, des workflows asynchrones, une API simple à utiliser pour un développement rapide, etc..
POURQUOI EASY PEASY ?
Tout d’abord parce que c’est intuitif ! Il est possible de gérer rapidement (et facilement!) l’état de votre application React. Cette librairie permet de gérer cela avec un minimum de code et surtout avec beaucoup moins de complexité que d’autres outils qu’on a l’habitude d’utiliser, tels que Redux.
Attention, il ne s’agit pas de faire un procès à Redux mais davantage d’entrevoir la possibilité d’accroître sa productivité et de gagner du temps dans un contexte professionnel nous demandant de respecter des délais de livraison précis.
Pour résumer, voici ses forces :
- aucune configuration
- se base sur les nouvelles API Hooks React
- récupération et effets secondaires des données
- conservation de l’état dans la session ou le local storage
- prise en charge étendue de TypeScript
- store global partagé au niveau des composants
- support react-native (je suis développeur react-native !!!)
- un support des outils dév Redux
- et un support du hot reloading
Comme je vous l’ai dit, ce plugin vous permettra de gagner du temps et de vous concentrer essentiellement sur la logique métier de votre application.
Lien vers le paquet officiel : https://github.com/ctrlplusb/easy-peasy
UTILISATION BASIQUE
/!\ Avant de l’utiliser, n’oubliez pas que cette librairie a été construite sur les API Hooks React, et n'est donc disponible qu’en version react & react-dom >= 16.8.0.
Voici les 2 principales étapes à retenir :
- Définir un modèle avec un Store et des Actions diverses sur ces objets.
- Importer des actions pour définir des actions personnalisées, qui peuvent être appelées à partir de n’importe quel composant.
Easy-peasy repose sur plusieurs concepts de base :
- Les Stores : qu’il faut créer via createContextStore permettant d’exposer l’état à des parties spécifiques de notre application en les encapsulant dans des contextes provider.
- Les Models : pour définir nos stores. Personnellement, je préfère “splitter” mes modèles en plusieurs fichiers pour une meilleure compréhension architecturale.
- Les Thunks Actions : pour effectuer une action spécifique sur notre modèle, tel que faire une demande à une API. (voyez ça comme un équivalent à redux-saga).
- Les Actions : pour déclarer une action sur notre modèle. Une action est utilisée pour effectuer des changements dans notre store.
- Computed : un concept peu utilisé mais particulièrement utile dans certains cas. Il permet de lier une propriété calculée à votre modèle en fournissant une fonction de calcul qui prendra l’état et renverra une valeur dérivée (ex: calculer la taille d’un tableau). Notez que cet état calculé est accessible comme tout autre état du store.
- useStoreState : à importer dans vos composants. Ce hook permet à vos composants d’accéder à l’état de votre store (voyez ça comme un équivalent à mapStateToProps de connect de react-redux)
- useStoreActions : à importer également dans vos composants. Ce hook permet à vos composants d’accéder aux actions de votre store (voyez ça comme un équivalent à mapDispatchToProps de connect de react-redux)
Pour la partie TUTO, et puisqu’il serait contreproductif de “plagier” le site officiel d’easy-peasy (qui propose une documentation très épurée et parfaitement compréhensible), voici un lien vous permettant de démarrer rapidement avec cette librairie : https://easy-peasy.now.sh/docs/quick-start.html
En tout cas chez TPZ, nous l’avons adopté dans la plupart de nos nouveaux projets react-native et nous en sommes très satisfaits. Voilà, c’est tout ! C’était Easy-Peasy en bref.
