Zustand rend la réaction trop facile

React a révolutionné la façon dont nous construisons les interfaces utilisateur, mais la gestion des états reste un défi. Les solutions traditionnelles de gestion d'état comme Redux peuvent être complexes et longues. Zustand a émergé, une petite bibliothèque de gestion d'état rapide et extensible qui facilite la gestion de l'état dans les applications React. Cet article explorera comment Zustand simplifie la gestion des états et pourquoi il s'agit d'un choix populaire parmi les développeurs. Nous fournirons également des exemples utilisant TypeScript pour démontrer sa puissance et sa flexibilité.

Introduction à Zustand

Zustand est une bibliothèque de gestion d'état minimaliste pour React axée sur la simplicité et les performances. Il fournit une API simple pour créer et gérer l'état, ce qui facilite son intégration dans n'importe quelle application React. Contrairement à Redux, Zustand ne nécessite aucun code passe-partout ni configuration complexe, ce qui le rend idéal pour les applications de petite et moyenne taille.

Principales fonctionnalités de Zustand

1. API simple : Zustand fournit une API simple et intuitive pour créer et gérer l'état.
2. Support TypeScript : Zustand dispose d'un support TypeScript intégré, ce qui le rend facile à utiliser dans les projets TypeScript.
3. Performance : Zustand est conçu pour être rapide et efficace avec un minimum de frais généraux.
4. Flexibilité : Zustand peut être utilisé avec n'importe quelle application React, quelle que soit sa taille ou sa complexité.

Démarrer avec Zustand

Pour commencer à utiliser Zustand, vous devez installer la bibliothèque en utilisant npm ou Yarn :

<code>npm install zustand</code>

ou

<code>yarn add zustand</code>

Créer du stockage à l'aide de Zustand

Créer du stockage avec Zustand est facile. Vous définissez un stockage à l'aide de la fonction create et spécifiez l'état initial et toutes les opérations que vous souhaitez effectuer sur cet état.

Exemple : Stockage de comptoir de base

Créons un comptoir simple en utilisant Zustand et TypeScript.

<code class="language-typescript">import create from 'zustand';

interface CounterState {
  count: number;
  increment: () => void;
  decrement: () => void;
}

const useCounterStore = create<CounterState>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

export default useCounterStore;</code>

Dans cet exemple, nous définissons une CounterState interface pour spécifier la forme de notre état et les actions que nous souhaitons effectuer. Nous créons ensuite le stockage à l'aide de la fonction create, en transmettant une fonction qui renvoie l'état et le fonctionnement initiaux.

Utiliser le stockage dans les composants

Maintenant que nous avons du stockage, nous pouvons l'utiliser dans notre composant React. Zustand fournit un hook appelé useStore qui vous permet d'accéder à l'état et aux opérations du stockage.

<code class="language-typescript">import React from 'react';
import useCounterStore from './useCounterStore';

const Counter: React.FC = () => {
  const { count, increment, decrement } = useCounterStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;</code>

Dans cet exemple, nous utilisons le hook useCounterStore pour accéder aux propriétés count, increment et decrement dans le stockage. Nous utilisons ensuite ces propriétés pour afficher le décompte actuel et fournissons des boutons pour incrémenter et décrémenter le décompte.

Utilisez Zustand pour une gestion avancée de l'état

Zustand n'est pas seulement destiné à la simple gestion de l'État. Il peut également gérer des scénarios plus complexes tels que les états imbriqués, les états dérivés et les opérations asynchrones.

Exemple : liste de tâches avec des états imbriqués

Créons un exemple plus complexe : une liste de tâches avec des états imbriqués.

<code>npm install zustand</code>

Dans cet exemple, nous définissons une interface Todo pour spécifier la forme de nos tâches, et une interface TodoState pour spécifier la forme de notre état et les actions que nous souhaitons effectuer. Nous créons ensuite le stockage à l'aide de la fonction create, en transmettant une fonction qui renvoie l'état et le fonctionnement initiaux.

Utiliser le stockage des tâches dans les composants

Maintenant que nous avons du stockage à faire, nous pouvons l'utiliser dans notre composant React.

<code>yarn add zustand</code>

Dans cet exemple, nous utilisons le hook useTodoStore pour accéder aux propriétés todos, addTodo, toggleTodo et removeTodo dans le stockage. Nous utilisons ensuite ces propriétés pour afficher la liste de tâches et fournir des entrées et des boutons pour ajouter, basculer et supprimer des éléments de tâche.

Utilisez Zustand pour les opérations asynchrones

Zusand prend également en charge les opérations asynchrones, ce qui facilite la gestion de la récupération de données et d'autres opérations asynchrones.

Exemple : Obtenir des données depuis l'API

Créons un exemple dans lequel nous obtenons des données et les stockons dans notre stockage Zustand.

<code class="language-typescript">import create from 'zustand';

interface CounterState {
  count: number;
  increment: () => void;
  decrement: () => void;
}

const useCounterStore = create<CounterState>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

export default useCounterStore;</code>

Dans cet exemple, nous définissons une DataState interface pour spécifier la forme de notre état et les actions que nous souhaitons effectuer. Nous créons ensuite le stockage à l'aide de la fonction create, en passant une fonction qui renvoie l'état initial et l'opération fetchData.

Utiliser le stockage de données dans les composants

Maintenant que nous avons le magasin de données, nous pouvons l'utiliser dans nos composants React.

<code class="language-typescript">import React from 'react';
import useCounterStore from './useCounterStore';

const Counter: React.FC = () => {
  const { count, increment, decrement } = useCounterStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;</code>

Dans cet exemple, nous utilisons le hook useDataStore pour accéder aux propriétés data, loading, error et fetchData dans le stockage. Nous utilisons ensuite ces propriétés pour afficher la liste des éléments de données et gérer le chargement et l'état d'erreur.

Conclusion

Zustand est une bibliothèque de gestion d'état puissante et flexible qui rend la gestion de l'état dans les applications React facile et efficace. Avec son API simple, sa prise en charge TypeScript intégrée et ses optimisations de performances, Zustand est un excellent choix pour les applications de petite et moyenne taille. Que vous créiez un simple compteur, une liste de tâches complexe ou que vous obteniez des données à partir d'une API, Zustand est là pour vous.

En tirant parti de Zustand, vous pouvez simplifier la gestion de l'état, réduire le code passe-partout et vous concentrer sur la création d'expériences utilisateur exceptionnelles. Essayez Zustand sur votre prochain projet React et voyez comment il peut rendre votre processus de développement plus fluide et plus agréable.

Bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!