Améliorez la gestion de votre état dans React : pourquoi Zustand vous aide à gérer l'état comme un pro sur Redux ?

Rabah Ali Shah

Suivre

Écouter

La gestion des états est l'une des parties les plus difficiles lors de la création d'une application à laquelle chaque développeur doit faire face. Sans aucun doute, en utilisant certains React Hooks, ce problème peut être résolu, mais la gestion de l'état peut être de plus en plus complexe dans les applications plus volumineuses. Dans de tels cas, nous ne pouvons pas simplement nous appuyer sur des hooks React très courants comme useState et useReducer etc. Puisque chaque bibliothèque apporte une solution à un problème particulier. Dans le cas de React et pour une gestion des instructions plus complexe, Dan Abramov a introduit une bibliothèque appelée Redux.

Redux est livré avec un concept étonnant de magasin centralisé qui est disponible indépendamment dans toute votre application React. Ce concept aide un développeur à ne pas se soucier d'obtenir l'état actuel d'un composant ou de le manipuler. Tout ce que vous avez à faire est d'encapsuler le magasin dans le fournisseur au niveau supérieur de votre application React et les fonctions d'importation à l'aide de certains hooks Redux dans les composants dans lesquels vous souhaitez lire l'état actuel ou le manipuler.

Création du magasin Redux :

C'est ainsi que vous créez un magasin Redux qui contient les états initiaux, les fonctions de réduction ou les actions que nous souhaitons effectuer sur nos états pour mettre à jour leurs états actuels. Dans ce cas, ce magasin contient en fait toute la logique d'un simple compteur qui ajoute ou soustrait des valeurs en cliquant respectivement sur le bouton « Incrémenter » ou « Décrémenter ».

Une fois que nous avons créé notre boutique, il est maintenant temps de la lier à notre composant React :

En plus de notre application dans le fichier index.js, nous fournissons la boutique Redux à l'application. En termes simples, nous déclarons notre boutique au niveau supérieur de notre application React afin que son état soit disponible pour tous ses éléments enfants.

Passons maintenant au fichier dans lequel nous voulons utiliser notre Redux Store :

Vous aurez besoin du hook useSelector pour obtenir les données du magasin Redux, puis en utilisant le hook useDispatch, vous pourrez appeler l'action pour mettre à jour votre état.

C'est ainsi que vous gérez les états dans Redux.

Le problème que vous avez peut-être remarqué est le long passe-partout de Redux. Même pour gérer des logiques aussi simples, vous devez configurer tous les passe-partout Redux mentionnés ci-dessus. Et parfois, cela devient complexe pour comprendre ce qui se passe avec Redux car pour obtenir les données, vous avez besoin d'un hook useSelector supplémentaire et pour appeler votre action, vous avez besoin d'un hook useDispatch. Ce qui devient difficile à utiliser dans des applications plus importantes où la gestion de l'état est beaucoup plus complexe.

La solution à ce problème est Zustand. Il s'agit d'une petite solution de gestion d'état React rapide et évolutive utilisant des principes de flux simplifiés. Zustand est livré avec le même concept de magasin centralisé qui gère votre état et disponible dans toute votre application.

La meilleure chose à propos de Zustand est que contrairement à Redux, vous n'avez pas besoin de configurer un long passe-partout et d'utiliser des hooks supplémentaires pour lire, appeler et manipuler les états. Tout ce dont vous avez besoin est de créer un magasin et de l'utiliser simplement n'importe où dans votre application React. Pas besoin de placer son fournisseur au niveau supérieur de l'application.

Création d'un magasin de conditions :

Découvrez à quel point il est simple de créer un magasin à Zustand. Simplement en utilisant la fonction create. Une fois que vous avez créé votre boutique avec Zustand. Il est temps de le lier à votre composant où vous souhaitez lire les données de votre boutique.

C'est ainsi que vous allez appeler vos fonctions de réduction, appelées actions. Importez simplement votre action et appelez-la. C'est ça! PAS BESOIN de hooks supplémentaires pour lire et distribuer les actions. Importez-les et utilisez-les simplement.

J'espère qu'après avoir vu tout le code ci-dessus, la simplicité de Zustand et sa comparaison avec Redux, vous avez obtenu votre réponse, mais voici néanmoins quelques avantages que vous obtiendrez en utilisant Zustand.

La gestion des états peut s'avérer difficile dans des applications plus complexes et plus volumineuses. Il ne fait aucun doute que Redux et des hooks comme useContext, useReducer sont là pour nous aider. Mais le problème est la configuration standard longue et complexe qui rend Redux moins convivial lors de la gestion des états.

Voici Zustand, une petite solution de gestion d'état rapide et évolutive pour les applications React. Sa simplicité, sa configuration moins standard et ses comportements de gestion d'état conviviaux le rendent plus favorable que Redux. N'hésitez pas à utiliser Zustand dans votre production et profitez de sa beauté de gestion des états de manière propre et simple.