Next.js 15-fullstackwebapps · Lektion

State på klientsiden med Zustand/Jotai

Implementér letvægtsbaseret og effektiv global statehåndtering på klientsiden med Zustand eller Jotai.

Lektion 2 af 411 trin

State på klientsiden med Zustand/Jotai er en gratis Next.js 15-fullstackwebapps-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Next.js 15-fullstackwebapps, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Next.js 15-fullstackwebapps-kurset indeholder 4 lektioner i alt.

Global tilstand: Ud over lokal tilstand

I React har du lært om lokal tilstand med useState, som er velegnet til data, der kun bruges i én enkelt komponent.

Men hvad nu, hvis data skal deles på tværs af mange komponenter eller dybt indlejrede komponenter uden at "bore props igennem" (sende props gennem mange lag)? Det er her, global tilstandshåndtering på klientsiden kommer ind i billedet.

Global tilstand giver enhver komponent mulighed for at tilgå eller opdatere delte data direkte. Det forenkler komplekse dataflows og gør din applikation nemmere at vedligeholde.

Mød Zustand: Enkel tilstand

Zustand er en lille, hurtig og skalerbar løsning til tilstandshåndtering i React. Dens API er enkel og hook-baseret, hvilket gør den meget intuitiv at lære og bruge.

Minimalistisk: Mindre gentagelseskode.
Hurtig: Optimeret til ydeevne.
Fleksibel: Fungerer med alle React-komponenter.
Hook-baseret: Føles naturlig for React-udviklere.

Kom godt i gang med Zustand

Før vi går i gang med at oprette stores, skal du installere Zustand i dit Next.js-projekt. Det kræver blot en enkel npm- eller yarn-kommando.

Åbn din terminal i projektets rodmappe, og kør:

npm install zustand

Eller hvis du foretrækker Yarn:

yarn add zustand

Når installationen er fuldført, er du klar til at definere din første store!

Oprettelse af en Zustand-store

En Zustand-store oprettes med funktionen create. Funktionen tager en tilbagekaldsfunktion, der definerer din oprindelige tilstand og dine handlinger.

Tænk på en store som et centralt knudepunkt for bestemte dele af globale data. Lad os oprette en grundlæggende tæller-store:

import { create } from 'zustand';

// Define your store
const useCounterStore = create((set) => ({
  count: 0,
}));

// This store can be imported and used in your React components.
// It's not runnable on its own, but defines the global state structure.

Store-tilstand og handlinger

Ud over blot at indeholde tilstand indeholder en store også handlinger – funktioner, der ændrer tilstanden. Funktionen set, som Zustand leverer, gør det muligt at opdatere store'ns tilstand.

Sådan tilføjer vi handlingerne increment og decrement til vores tæller-store:

import { create } from 'zustand';

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

// This store now has both state (count) and actions (increment, decrement).

Forbind komponenter med en store

For at bruge den globale tilstand i dine React-komponenter skal du blot importere store-hooket (f.eks. useCounterStore) og kalde det. Du kan vælge bestemte dele af tilstanden eller bestemte handlinger.

Lad os oprette en komponent, der viser den aktuelle tællerværdi fra vores store:

import { create } from 'zustand';

// Define your store (as in previous scenes)
const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

// A React component that uses the store
export default function CounterDisplay() {
  // Select the 'count' state from the store
  const count = useCounterStore((state) => state.count);

  return (
    <div>
      <p>Current Count: {count}</p>
    </div>
  );
}

// This component can be rendered in a Next.js page or another component.

Interaktivt tællereksempel

Lad os nu gøre vores tæller interaktiv! Vi tilføjer knapper, der kalder handlingerne increment og decrement, som er defineret i vores store.

Det viser, hvordan komponenter både kan læse fra og skrive til den globale tilstand, så alt forbliver synkroniseret.

import { create } from 'zustand';

// Define your store
const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

// A React component that uses the store and its actions
export default function InteractiveCounter() {
  // Select both state and actions
  const { count, increment, decrement } = useCounterStore();

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

// This component is fully runnable and demonstrates Zustand in action.

Effektivt valg af tilstand

Som standard kan komponenter, der bruger store'n, blive gengivet igen, hvis en hvilken som helst del af store'ns tilstand ændres. Du kan optimere dette ved at bruge vælgere.

En vælger er en funktion, som du sender til useStore, og som kun udvælger de specifikke data, din komponent har brug for. Hvis kun de udvalgte data ændres, gengives komponenten igen.

import { create } from 'zustand';

// A more complex store with multiple states
const useSettingsStore = create((set) => ({
  theme: 'dark',
  fontSize: 16,
  toggleTheme: () => set((state) => ({ theme: state.theme === 'dark' ? 'light' : 'dark' })),
  setFontSize: (size) => set({ fontSize: size }),
}));

// Component only cares about 'theme'
export default function ThemeDisplay() {
  // Using a selector to only subscribe to 'theme'
  const theme = useSettingsStore((state) => state.theme);

  return (
    <p>Current Theme: <b>{theme}</b></p>
  );
}

// If fontSize changes, ThemeDisplay will NOT re-render because it only selects 'theme'.

Bedste praksis for Zustand

Sådan holder du dine Zustand-stores rene og effektive:

Uforanderlighed: Opdater altid tilstanden uforanderligt. Du må ikke ændre objekter eller arrays i tilstanden direkte; opret nye i stedet.
Adskil ansvar: Hold relateret tilstand og relaterede handlinger i den samme store. Opret flere stores til forskellige domæner (f.eks. useUserStore, useCartStore).
Vælgere: Brug vælgere for at forhindre unødvendige gengivelser af komponenter.
Middleware: Hvis du har brug for avancerede funktioner som vedvarende lagring eller logning, kan du udforske Zustands middleware-muligheder.

Videnstjek om Zustand

Zustand tilbyder en fleksibel og let tilgang til global tilstandshåndtering. Vælg de korrekte udsagn om fordelene ved Zustand og dets egenskaber ud fra det, du har lært.

Besvar den i den interaktive lektion

Zustand: Hurtig opsummering

Tillykke! Du har lært det grundlæggende i global tilstandshåndtering på klientsiden med Zustand.

Vi undersøgte, hvorfor global tilstand er vigtig i komplekse apps.
Du så, hvordan du definerer en Zustand-store med tilstand og handlinger ved hjælp af create.
Vi lærte at forbinde React-komponenter med store'n og arbejde med dens tilstand og handlinger.
Til sidst talte vi om, hvordan vælgere kan optimere gengivelser af komponenter.

Zustand hjælper dig med at håndtere delte data effektivt, så dine Next.js-applikationer bliver mere skalerbare og nemmere at vedligeholde.

Gratis at komme i gang

Lær TypeScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 12
Lektioner: 48

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “State på klientsiden med Zustand/Jotai” gratis?

Ja — alle 3 lektioner i læringssporet Next.js 15-fullstackwebapps, inklusive “State på klientsiden med Zustand/Jotai”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Next.js 15-fullstackwebapps-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “State på klientsiden med Zustand/Jotai”?

Implementér letvægtsbaseret og effektiv global statehåndtering på klientsiden med Zustand eller Jotai. Du øver dig i Next.js 15-fullstackwebapps med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Next.js 15-fullstackwebapps?

Der kræves ingen tidligere erfaring. Next.js 15-fullstackwebapps på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “State på klientsiden med Zustand/Jotai”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Next.js 15-fullstackwebapps-lektion?

Ja. Alle Next.js 15-fullstackwebapps-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

React Query til server-state
State på klientsiden med Zustand/Jotai
Strategier til caching på serversiden
Optimistiske opdateringer og cache-invalidéring

← Tilbage til Next.js 15-fullstackwebapps