La différence entre Redux et MobX
Dans un récent projet, j’ai pu expérimenter un nouveau state manager. Avant d’y travailler je ne le connaissais que de nom. Il est moins populaire que Redux mais pas forcément moins intéressant. Voyons dans ce premier article de l’année 2023, les différences entre MobX et Redux.
Redux et MobX sont deux bibliothèques de gestion de l’état populaires dans le développement de applications web en React. Bien qu’elles aient toutes deux des objectifs similaires, il y a quelques différences clés entre les deux.
Tout d’abord, Redux est basé sur un modèle de données immuable, ce qui signifie que l’état de l’application ne peut être modifié de manière directe. Au lieu de cela, pour mettre à jour l’état, vous devez envoyer une action qui décrit la mise à jour souhaitée. Cette action est envoyée à un gestionnaire d’actions appelé “reducer”, qui utilise cette action pour produire une nouvelle version de l’état de l’application. Ensuite, l’application est re-render en utilisant la nouvelle version de l’état.
MobX, en revanche, utilise une approche basée sur les observable pour mettre à jour l’état de l’application. Au lieu de décrire explicitement les mises à jour d’état à l’aide d’actions, vous pouvez simplement marquer les propriétés de l’état que vous souhaitez observer et MobX s’occupera de mettre à jour l’application en conséquence. Cette approche est généralement considérée comme plus simple et plus intuitive.
Il y a également quelques différences en termes de scalabilité et de performances. Redux est conçu pour gérer des applications de grande envergure et peut être utilisé avec succès dans de nombreux contextes différents. Cependant, il peut nécessiter une configuration et une gestion supplémentaires pour obtenir de bonnes performances dans les applications de grande envergure. MobX, en revanche, est conçu pour être performant et scalable dès le départ et peut gérer efficacement les applications de toutes tailles sans trop de configuration supplémentaire.
Voyons avec un exemple pour comparer.
Supposons que nous avons une application qui affiche une liste de tâches à accomplir. Pour ajouter une tâche à la liste, nous devons suivre ces étapes :
Avec Redux, voici la démarche :
- Définir une action qui décrit l’ajout de la tâche à la liste. Par exemple :
2. Créer un reducer qui prend l’état actuel de l’application et l’action comme entrées et produit une nouvelle version de l’état. Par exemple :
3. Dispatch l’action à l’aide de la fonction dispatch de Redux.
Avec MobX, cela donnerai ceci :
- Marquer la liste de tâches comme étant observable.
2. Ajouter une méthode à l’objet tasks qui ajoute une tâche à la liste.
3. Appeler la méthode addTask pour ajouter une tâche à la liste.
Comme vous pouvez le voir, l’exemple MobX est plus court et plus simple que l’exemple Redux. Cependant, il est important de noter que MobX a une approche plus lâche et moins explicite pour la gestion de l’état, ce qui peut être un avantage ou un inconvénient selon vos préférences de développement.
Pour conclure, la décision de choisir entre Redux et MobX dépend de vos préférences personnelles et de vos besoins en matière de développement. Si vous préférez une approche plus explicite et contrôlée pour la gestion de l’état, Redux pourrait être la meilleure option. Si vous préférez une approche plus intuitive et moins verbeuse, MobX pourrait être un meilleur choix.
