Lernen Sie Zustand jetzt auf einfachste Weise!

Die Statusverwaltung in React war noch nie so einfach und leicht! Lernen Sie Zustand kennen, eine kleine, aber leistungsstarke Zustandsverwaltungsbibliothek, die Ihnen das Leben als Entwickler erheblich erleichtern wird. Egal, ob Sie die Standardfunktionen von Redux oder die Einschränkungen der Kontext-API satt haben, Zustand ist hier, um den Tag zu retten.

In diesem Beitrag stelle ich Zustand vor und teile ein Starterprojekt, das ich erstellt habe und das auf GitHub verfügbar ist. Folgen Sie uns, um in nur wenigen Schritten mit Zustand in einem Next.js-Projekt zu beginnen! ?

Was ist Zustand? ?

Zustand (deutsch für „Zustand“) ist eine minimalistische Zustandsverwaltungsbibliothek für React. Es bietet:

• Eine supereinfache API.
• Hohe Leistung ohne unnötiges erneutes Rendern.
• Leicht verständliche Syntax.
• Integrierte Middleware-Unterstützung (z. B. für den persistenten Zustand).

Lassen Sie uns nun mit der Einrichtung in Ihrem Next.js-Projekt beginnen!

---

So richten Sie Zustand in Ihrem Next.js-Projekt ein

Befolgen Sie diese einfachen Schritte, um Zustand in Ihre Next.js-App zu integrieren.

1. Zustand installieren

Führen Sie den folgenden Befehl aus, um Zustand zu installieren:

npm i zustand

2. Erstellen Sie einen Store-Ordner

Erstellen Sie in Ihrem src-Ordner einen neuen Ordner mit dem Namen „store“. Hier werden alle Ihre Zustandsdateien gespeichert.

src/
  store/
    index.ts
    userStore.ts

---

3. Fügen Sie Ihre Geschäfte hinzu

userStore.ts

Dieser Shop verarbeitet benutzerbezogene Daten.

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 }),
}));
</userstore>

counterStore.ts (mit Persistenz)

Dieser Store verarbeitet einen Zählerstand und speichert ihn im 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),
    }
  )
);
</icounterstore>

index.ts

Diese Datei exportiert alle Geschäfte für einfachere Importe.

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

export { useUserStore, useCounterStore };

---

4. Verwendung von Zustand in Komponenten

Hier ist ein Beispiel für die Verwendung von Zustandsspeichern in Ihren Next.js-Komponenten.

Home.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 classname="p-2 border" href="/about">About
        <link classname="p-2 border" href="/contact">Contact
      </div>
      <h1 id="Hello">Hello</h1>
      <h1 id="User-userStore-user-email">User: {userStore.user?.email}</h1>
      <button classname="bg-blue-500 rounded-md p-2 text-white" onclick="{handleAddUser}">
        Add User
      </button>

      <br>
      <h1 id="Counter-counterStore-counter">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>
  );
}

---

Starter-Projekt-Repository?

Der vollständige Code für dieses Starterprojekt ist auf GitHub verfügbar. Es ist einsteigerfreundlich und enthält alles, was Sie brauchen, um Zustand mit Next.js zu verwenden.

Klonen Sie das Repository und legen Sie los:

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

---

Verwalten Sie Ihren Zustand mühelos mit Zustand. Teilen Sie mir Ihre Meinung mit oder teilen Sie mir Ihre eigenen Anwendungsfälle mit! ?

Das obige ist der detaillierte Inhalt vonLernen Sie Zustand jetzt auf einfachste Weise!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!