ZUSTAND, Redux touche-t-il à sa fin ? / Blogs / Perficient

Pourquoi cette solution de gestion d’état s’appelle-t-elle Zustand ?

« Zustand » est un mot allemand qui se traduit par « État » en anglais. Dans le contexte de la programmation et du développement de logiciels, « Zustand » est souvent utilisé conjointement avec « Zustands management », qui se traduit par « gestion de l’état ».

Il fait référence à la gestion de l’état d’une application, généralement pour garder une trace des données et des interactions des utilisateurs dans une application Web ou mobile.

Qu’est-ce que Zustand ?

Une solution de gestion d’état de Bearbones petite, rapide et évolutive utilisant des principes de flux simplifiés. Possède une API confortable basée sur des hooks, n’est pas passe-partout ni opiniâtre.

Introduction

Redux a changé la donne dans le système de gestion global. Ce fut un grand succès et a été largement adopté et utilisé comme le meilleur système de gestion d’État pour n’importe quel cadre. Son principe sert grandement dans le développement de logiciels. Presque tous les développeurs ont utilisé Redux pour gérer leur état global et nous savons tous à quel point il est rapide et maintenable d’utiliser Redux comme outil de gestion d’état global. Cela rend le débogage très facile et notre application est prévisible.

Oui, Redux a pris le devant de la scène dans la gestion mondiale des États, mais il y a un petit nouveau dans le quartier. Ce nouveau venu est prêt à conquérir le public du système mondial de gestion étatique. Il est doté d’un puissant coup de poing et est armé jusqu’aux dents. Son nom est Zustand. Avec l’arrivée de Zustand et les goodies qu’il apporte, suffira-t-il à dire que le règne de Redux touche à sa fin ?

Usage

npm install zustand or yarn add zustand or pnpm add zustand

Voici un exemple du fonctionnement de Zustand et des raisons pour lesquelles vous pourriez vouloir l’utiliser :

import create from 'zustand';

// Define a Zustand store

const useCounterStore = create((set) => ({

  count: 0,

  increment: () => set((state) => ({ count: state.count + 1 })),

  decrement: () => set((state) => ({ count: state.count - 1 })),

}));


// In a component

function Counter() {

  const { count, increment, decrement } = useCounterStore();


  return (

    <div>

      <p>Count: {count}</p>

      <button onClick={increment}>Increment</button>

      <button onClick={decrement}>Decrement</button>

    </div>

  );

}

```

Dans cet exemple :

1. ‘create’ est utilisé pour créer un magasin Zustand avec un état initial et des actions pour mettre à jour cet état.
2. Le magasin ‘useCounterStore’ est défini avec un état initial de ‘count’ et deux actions pour incrémenter et décrémenter le compte.
3. Dans le composant « Compteur », l’état et les actions du magasin sont accessibles et utilisés pour afficher le nombre et gérer les interactions des utilisateurs.

Voici pourquoi vous souhaiterez peut-être utiliser Zustand pour la gestion de l’état dans une application React :

1. Simplicité: Zustand fournit une API simple et intuitive pour gérer l’état de votre application. Cela peut rendre la gestion de l’état dans React plus simple et moins de code passe-partout par rapport à d’autres solutions.
2. Performance: Zustand est conçu pour être très performant. Il exploite les proxys JavaScript pour mettre à jour efficacement l’état et déclencher de nouveaux rendus si nécessaire.
3. Intégration de réaction: Zustand est conçu pour fonctionner de manière transparente avec React. Il utilise des hooks React pour la gestion de l’état, ce qui en fait un choix naturel pour les applications React.
4. Taille: Zustand est une petite bibliothèque avec une petite taille de bundle. Cela peut être crucial pour maintenir la légèreté de votre application, ce qui est essentiel pour les performances Web.
5. Prévisible et clair: Zustand encourage un flux d’état clair et prévisible dans votre application. L’état est conservé dans un magasin centralisé, ce qui facilite le raisonnement et le débogage.
6. Flexible: Zustand n’impose pas de manière spécifique de structurer votre état ou vos composants. Vous pouvez l’utiliser avec différents modèles architecturaux et l’adapter aux besoins de votre projet.

Conclusion

Dans l’ensemble, Zustand est un choix populaire pour la gestion de l’état dans les applications React, en particulier lorsque vous souhaitez garder votre base de code propre, simple et performante.

Pour en savoir plus sur Zustand : https://github.com/pmndrs/zustand

Site pour l’état : https://zustand-demo.pmnd.rs/