Un guide du débutant sur la gestion d'état dans React avec Zustand

Introduction

La gestion de l'état est cruciale pour toute application React, mais les bibliothèques traditionnelles comme Redux peuvent parfois sembler exagérées. Entrez Zusstand, une solution de gestion d'état minimale et puissante pour React. Dans cet article, nous verrons pourquoi Zustand est en train de devenir un favori des développeurs et comment le démarrer dans vos projets React.

Qu’est-ce que Zustand ?

Zustand est une bibliothèque de gestion d'état pour React conçue pour être simple et intuitive. Il est léger et ne nécessite pas beaucoup de passe-partout, ce qui le rend plus facile à utiliser que Redux ou même l'API React Context. Voyons comment nous pouvons utiliser Zustand dans nos applications React.

Configuration de Zustand dans React

• Installer Zustand
  

  npm install zustand
  

• Créer une boutique
  Voici un exemple simple de la façon de créer un magasin dans Zustand :
  

  import {create} from 'zustand';
  
  const useStore = create((set) => ({
    count: 0,
    increase: () => set((state) => ({ count: state.count + 1 })),
    decrease: () => set((state) => ({ count: state.count - 1 })),
  }));
  

• Utiliser le Store dans un composant
  Maintenant, utilisons le store dans un composant React :
  

  import React from 'react';
  import { useStore } from './store';
  
  const Counter = () => {
    const { count, increase, decrease } = useStore();
  
    return (
      <div>
        <h1>{count}</h1>
        <button onClick={increase}>Increase</button>
        <button onClick={decrease}>Decrease</button>
      </div>
    );
  };
  
  export default Counter;
  

Fonctionnalités avancées de Zustand : get, getState

• Zustand fournit également deux autres fonctions utiles : get et getState. Ceux-ci sont utilisés pour récupérer l'état et obtenir l'état à tout moment

getState() : Cette fonction vous donne l'état actuel de la boutique sans déclencher de nouveau rendu.

import {create} from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
  decrease: () => set((state) => ({ count: state.count - 1 })),
}));

// Accessing the current state using getState()
const count= useStore.getState().count;

// Reading the current state value
console.log(count); // This will log the current count

// Modifying the state using the actions
store.increase(); // This will increase the count
console.log(store.count); // This will log the updated count

get() : Cette fonction vous permet d'accéder directement à l'état depuis le magasin lui-même. C'est utile si vous devez vérifier ou modifier l'état avant ou après l'avoir défini.

import {create} from 'zustand';

const useStore = create((set, get) => ({
  count: 0,
  increase: (amount) => {
    const currentState = get(); // Access the current state using getState()
    console.log("Current count:", currentState.count); // Log the current count
    set((state) => ({ count: state.count + amount })); // Modify the state
  },
})); 

Tranches à Zustand

• À mesure que votre application grandit, c'est une bonne idée d'organiser votre état en éléments plus petits et plus gérables. C'est là que les tranches entrent en jeu. Une tranche est un élément d'état modulaire avec son propre ensemble d'actions. Chaque tranche peut être définie dans son propre fichier, ce qui rend votre code plus propre et plus maintenable.

// counterStore.js
export const createCounterSlice = (set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
  decrease: () => set((state) => ({ count: state.count - 1 })),
});

// userStore.js
export const createUserSlice = (set) => ({
  user: { name: 'John Doe' },
  setName: (name) => set({ user: { name } }),
});

// useBoundStore.js
import {create} from 'zustand';
import { createCounterSlice } from './counterStore';
import { createUserSlice } from './userStore';

export const useBoundStore = create((...a) => ({
  ...createCounterSlice(...a),
  ...createUserSlice(...a),
}));

Comment utiliser le composant interne

import { useBoundStore } from './useBoundStore'
const App = () => {
  const { count, increase, decrease, user, setName } = useBoundStore();
}

État persistant à Zustand

• Le middleware persistant de Zustand enregistre automatiquement l'état dans localStorage lorsqu'il change et le charge lorsque la page est rechargée, garantissant ainsi que l'état reste le même sans nécessiter de travail supplémentaire.

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

const useStore = create(
  persist(
    (set) => ({
      count: 0,
      increase: () => set((state) => ({ count: state.count + 1 })),
      decrease: () => set((state) => ({ count: state.count - 1 })),
    }),
    {
      name: 'counter-storage', // The name of the key in localStorage
    }
  )
);

Récupérer des données à partir d'une API dans Zustand

• Pour récupérer des données à partir d'une API dans Zustand, créez une action dans votre boutique pour gérer l'appel d'API et mettre à jour l'état avec les données récupérées, le chargement et les états d'erreur.

import {create} from 'zustand';

const useStore = create((set) => ({
  users: [], // Array to store fetched users
  loading: false, // State to track loading status
  error: null, // State to track any errors during API call

  // Action to fetch users from the API
  fetchUsers: async () => {
    set({ loading: true, error: null }); // Set loading state to true and reset error
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/users');
      const data = await response.json();
      set({ users: data, loading: false }); // Set users data and loading to false
    } catch (error) {
      set({ error: 'Failed to fetch users', loading: false }); // Set error if fetch fails
    }
  },
}));

export default useStore;

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!