Zustand est une petite bibliothèque de gestion d'état rapide et évolutive pour React, qui sert d'alternative à des solutions plus complexes comme Redux. La principale raison pour laquelle Zustand a gagné autant de popularité est sa petite taille et sa syntaxe simple par rapport à Redux.

Comprendre la configuration de Zustand

Tout d'abord, vous devez installer Zustand et TypeScript si ce n'est pas déjà fait.

npm install zustand
'or'
yarn add zustand

Zustand fournit une fonction de création pour définir votre boutique. Passons en revue un exemple de base dans lequel nous stockons et manipulons une valeur de comptage.

Créons un fichier appelé store.ts où nous avons un hook personnalisé useCounterStore() :

import { create } from "zustand"

type CounterStore = {
    count: number
    increment: () => void
    resetCount: () => void
}

export const useCounterStore = create((set) => ({
    count: 0
    increment: () => set((state) => ({ count: state.count   1 })),
    resetCount: () => set({ count: 0 })
}))

Dans cet exemple :

• count est un morceau d'état.

• increaseCount et resetCount sont des actions qui modifient l'état.

• set est une fonction fournie par Zustand pour mettre à jour la boutique.

Utilisation du Store dans un composant React

import React from 'react'
import { useCounterStore } from './store'

const Counter: React.FC = () => {
  const count = useCounterStore((state) => state.count) // Get count from the store
  const increment = useCounterStore((state) => state.increment) // Get the action

  return (
    

      
{count}
      Increase Count
    
  )
}

export default Counter;

Ici, Counter est un composant React. Comme vous pouvez le voir, useCounterState() est utilisé pour accéder au nombre et à l'incrément.

Vous pouvez déstructurer l'état au lieu de les obtenir directement comme suit :

const {count, increment} = useCounterStore((state) => state)

Mais cette approche le rend moins performant. Ainsi, la meilleure pratique consiste à accéder directement à l’État, comme indiqué précédemment.

Actions asynchrones

Effectuer une action asynchrone ou appeler une requête API au serveur est également assez simple dans Zustand. Ici, le code suivant explique tout :

export const useCounterStore = create((set) => ({
    count: 0
    increment: () => set((state) => ({ count: state.count   1 })),
    incrementAsync: async () => {
        await new Promise((resolve) => setTimeout(resolve, 1000))
        set((state) => ({ count: state.count   1 }))
    },
    resetCount: () => set({ count: 0 })
}))

Cela ne ressemble-t-il pas à une fonction asynchrone générique en JavaScript ? Tout d’abord, il exécute le code asynchrone, puis définit l’état avec la valeur donnée.

Voyons maintenant comment vous pouvez l'utiliser sur un composant React :

const OtherComponent = ({ count }: { count: number }) => {
  const incrementAsync = useCounterStore((state) => state.incrementAsync)

  return (
    

      {count}
      

        Increment
      
    
  )
}

Comment accéder à l'état en dehors du composant React

Jusqu'à présent, vous n'avez accédé qu'à l'état dans les composants React. Mais qu’en est-il de l’accès à l’état depuis l’extérieur des composants React ? Oui, avec Zustand, vous pouvez accéder à l'état depuis l'extérieur des composants React.

const getCount = () => {
  const count = useCounterStore.getState().count
  console.log("count", count)
}

const OtherComponent = ({ count }: { count: number }) => {
  const incrementAsync = useCounterStore((state) => state.incrementAsync)
  const decrement = useCounterStore((state) => state.decrement)

  useEffect(() => {
    getCount()
  }, [])

  return (
    

      {count}
      

        Increment
        Decrement
      
    
  )
}

Ici, vous pouvez voir que getCount() accède à l'état par getState()

Nous pouvons également définir le nombre :

const setCount = () => {
  useCounterStore.setState({ count: 10 })
}

Persister le middleware

Le middleware persistant de Zustand est utilisé pour conserver et réhydrater l'état entre les sessions du navigateur, généralement en utilisant localStorage ou sessionStorage. Cette fonctionnalité vous permet de conserver l'état même après un rechargement de page ou lorsque l'utilisateur ferme et rouvre le navigateur. Voici une description détaillée de son fonctionnement et de son utilisation.

Utilisation de base de persist

Voici comment créer une boutique Zustand avec persist :

import create from 'zustand';
import { persist } from 'zustand/middleware';

// Define the state and actions
interface BearState {
  bears: number;
  increase: () => void;
  reset: () => void;
}

// Create a store with persist middleware
export const useStore = create(
  persist(
    (set) => ({
      bears: 0,
      increase: () => set((state) => ({ bears: state.bears   1 })),
      reset: () => set({ bears: 0 }),
    }),
    {
      name: 'bear-storage', // Name of the key in localStorage
    }
  )
);

L'état est enregistré sous la clé "bear-storage" dans localStorage. Désormais, même si vous actualisez la page, le nombre d'ours persistera lors des rechargements.

Par défaut, persist utilise localStorage, mais vous pouvez le remplacer par sessionStorage ou tout autre système de stockage. Il y a beaucoup de choses à aborder sur le thème de la persistance de l’État à Zustand. Vous obtiendrez un tutoriel/article détaillé sur ce sujet, qui suivra cet article.

Conclusion

Nous savons tous à quel point Redux est formidable en tant qu'outil de gestion d'état. Mais Redux possède un passe-partout assez complexe et large. C'est pourquoi de plus en plus de développeurs choisissent Zustand comme outil de gestion d'état, simple et évolutif.

Mais vous verrez quand même que Redux est plus recommandé pour la gestion d'états très complexes et imbriquées.