Apprenez Zustand dès maintenant, de la manière la plus simple !

Gérer l'état dans React n'a jamais été aussi simple et léger ! Découvrez Zustand, une bibliothèque de gestion d'état petite mais puissante qui vous facilitera grandement la vie en tant que développeur. Que vous en ayez assez du passe-partout de Redux ou des limitations de l'API Context, Zustand est là pour sauver la situation.

Dans cet article, je présenterai Zustand et partagerai un projet de démarrage que j'ai construit, disponible sur GitHub. Suivez-nous pour démarrer avec Zustand dans un projet Next.js en quelques étapes seulement ! ?

Qu’est-ce que Zustand ? ?

Zustand (allemand pour « état ») est une bibliothèque minimaliste de gestion d'état pour React. Il propose :

• Une API ultra simple.
• Hautes performances sans nouveaux rendus inutiles.
• Syntaxe facile à comprendre.
• Prise en charge du middleware intégré (par exemple, pour l'état persistant).

Maintenant, passons à sa configuration dans votre projet Next.js !

---

Comment configurer Zusstand dans votre projet Next.js

Suivez ces étapes simples pour intégrer Zustand dans votre application Next.js.

1. Installez Zustand

Exécutez la commande suivante pour installer Zustand :

npm i zustand

2. Créez un dossier de magasin

Dans votre dossier src, créez un nouveau dossier nommé store. Cela contiendra tous vos fichiers d'état Zustand.

src/
  store/
    index.ts
    userStore.ts

---

3. Ajoutez vos magasins

userStore.ts

Cette boutique gérera les données relatives aux utilisateurs.

import { create } from "zustand";

interface User {
  id: string;
  name: string;
  email: string;
}

interface UserStore {
  user: User | null;
  setUser: (user: User | null) => void;
}

export const useUserStore = create<UserStore>((set) => ({
  user: null,
  setUser: (user: User | null) => set({ user }),
}));

counterStore.ts (avec persist)

Ce magasin gérera un état de compteur et le conservera dans localStorage.

"use client";

import { create } from "zustand";
import { persist, createJSONStorage } from "zustand/middleware";

interface ICounterStore {
  counter: number;
  increment : ()=> void;
  decrement : ()=> void;
  reset : ()=> void;
  getLatestCountDivided2: ()=> number;
}
export const useCounterStore = create<ICounterStore>()(
  persist(
    (set, get) => ({
      counter: 0,

      increment: () => set(state => ({ counter: state.counter + 1 })),
      decrement: () => set(state => ({ counter: state.counter - 1 })),
      reset: () => set({ counter: 0 }),
      getLatestCountDivided2: ()=> get().counter / 2,
    }),
    {
      name: "counter-store",
      storage: createJSONStorage(()=> localStorage),
    }
  )
);

index.ts

Ce fichier exportera tous les magasins pour des importations plus faciles.

import { useUserStore } from "./userStore";
import { useCounterStore } from "./counterStore";

export { useUserStore, useCounterStore };

---

4. Utilisation de Zustand dans les composants

Voici un exemple d'utilisation des magasins Zustand dans vos composants Next.js.

Accueil.tsx

"use client";
import { useCounterStore, useUserStore } from "@/store";
import Link from "next/link";

export default function Home() {
  // Access Zustand stores
  const userStore = useUserStore();
  const counterStore = useCounterStore();

  const handleAddUser = () => {
    userStore.setUser({ id: "1", name: "Joodi", email: "mail@example.com" });
  };

  return (
    <div className="">
      <div className="flex gap-2 p-2">
        <Link className="p-2 border" href="/">Home</Link>
        <Link className="p-2 border" href="/about">About</Link>
        <Link className="p-2 border" href="/contact">Contact</Link>
      </div>
      <h1>Hello</h1>
      <h1>User: {userStore.user?.email}</h1>
      <button
        className="bg-blue-500 rounded-md p-2 text-white"
        onClick={handleAddUser}
      >
        Add User
      </button>

      <br />
      <h1>Counter: {counterStore.counter}</h1>
      <button className="bg-blue-500 rounded-md text-white p-2" onClick={counterStore.increment}>
        Increment
      </button>
      <button className="bg-blue-500 rounded-md text-white p-2" onClick={counterStore.decrement}>
        Decrement
      </button>
      <button className="bg-blue-500 rounded-md text-white p-2" onClick={counterStore.reset}>
        Reset
      </button>
    </div>
  );
}

---

Référentiel de projets de démarrage ?

Le code complet de ce projet de démarrage est disponible sur GitHub. Il est adapté aux débutants et comprend tout ce dont vous avez besoin pour commencer à utiliser Zustand avec Next.js.

Clonez le référentiel et lancez-vous :

git clone https://github.com/MiladJoodi/Zustand_Starter_Project.git
cd Zustand_Starter_Project
npm install
npm run dev

---

Commencez à gérer votre état sans effort avec Zustand. Faites-moi savoir ce que vous en pensez ou partagez vos propres cas d'utilisation ! ?

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!