Next.js 15: fullstack-webbappar · Lektion

Tillstånd på klientsidan med Zustand/Jotai

Implementera lättviktig och prestandaeffektiv global tillståndshantering på klientsidan med Zustand eller Jotai.

Lektion 2 av 411 steg

Tillstånd på klientsidan med Zustand/Jotai är en gratis lektion i Next.js 15: fullstack-webbappar på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Next.js 15: fullstack-webbappar, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Next.js 15: fullstack-webbappar innehåller totalt 4 lektioner.

Global status: bortom lokal status

I React har ni lärt er om lokal status med useState, vilket passar bra för data som endast används i en enskild komponent.

Men vad händer om data behöver delas mellan många komponenter eller djupt nästlade komponenter utan att behöva skicka props genom många lager (så kallad "prop drilling")? Det är här global statushantering på klientsidan kommer in.

Global status gör det möjligt för alla komponenter att direkt komma åt eller uppdatera delade data. Det förenklar komplexa dataflöden och gör applikationen enklare att underhålla.

Möt Zustand: enkel statushantering

Zustand är en liten, snabb och skalbar lösning för statushantering i React. API:et är enkelt och hookbaserat, vilket gör det mycket intuitivt att lära sig och använda.

Minimalistiskt: Mindre kodmängd som kräver standardlösningar.
Snabbt: Optimerat för god prestanda.
Flexibelt: Fungerar med alla React-komponenter.
Hookbaserat: Känns naturligt för React-utvecklare.

Kom igång med Zustand

Innan ni börjar skapa stores behöver ni installera Zustand i ert Next.js-projekt. Det gör ni med ett enkelt npm- eller yarn-kommando.

Öppna terminalen i projektets rotkatalog och kör:

npm install zustand

Eller, om ni föredrar Yarn:

yarn add zustand

När installationen är klar kan ni definiera er första store!

Skapa en Zustand-store

En Zustand-store skapas med funktionen create. Funktionen tar emot en callback som definierar ert initiala tillstånd och era åtgärder.

Tänk på en store som ett centralt nav för specifika delar av globala data. Låt oss skapa en enkel räknar-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-status och åtgärder

Förutom att lagra status innehåller en store även åtgärder – funktioner som ändrar statusen. Funktionen set som tillhandahålls av Zustand låter er uppdatera storens status.

Så här lägger vi till åtgärderna increment och decrement i vår räknar-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).

Anslut komponenter till en store

För att använda global status i era React-komponenter importerar ni helt enkelt store-hooken (t.ex. useCounterStore) och anropar den. Ni kan välja specifika delar av statusen eller specifika åtgärder.

Låt oss skapa en komponent som visar det aktuella värdet från vår 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 räknarexempel

Nu gör vi vår räknare interaktiv! Vi lägger till knappar som anropar åtgärderna increment och decrement som definierats i vår store.

Det visar hur komponenter både kan läsa från och skriva till den globala statusen, så att allt hålls synkroniserat.

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 val av status

Som standard kan komponenter som använder en store renderas om när någon del av storens status ändras. För att optimera detta kan ni använda selektorer.

En selektor är en funktion som ni skickar till useStore och som väljer ut endast de specifika data som komponenten behöver. Komponenten renderas om när just dessa valda data ändras.

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'.

Bästa praxis för Zustand

Så här håller ni era Zustand-stores rena och effektiva:

Oföränderlighet: Uppdatera alltid status på ett oföränderligt sätt. Ändra inte objekt eller arrayer i statusen direkt; skapa nya i stället.
Separera ansvarsområden: Håll relaterad status och relaterade åtgärder i samma store. Skapa flera stores för olika områden (t.ex. useUserStore och useCartStore).
Selektorer: Använd selektorer för att förhindra onödiga omrenderingar av komponenter.
Middleware: För avancerade funktioner som beständig lagring eller loggning kan ni utforska Zustands middleware-alternativ.

Kunskapskontroll av Zustand

Zustand erbjuder ett flexibelt och lättviktigt sätt att hantera global status. Välj de korrekta påståendena om dess fördelar och egenskaper utifrån det ni har lärt er.

Besvara frågan i den interaktiva lektionen

Zustand: snabb repetition

Grattis! Ni har lärt er grunderna i global statushantering på klientsidan med Zustand.

Vi utforskade varför global status är viktigt i komplexa appar.
Ni såg hur en Zustand-store med status och åtgärder definieras med create.
Vi lärde oss att ansluta React-komponenter till storen och interagera med dess status och åtgärder.
Slutligen gick vi igenom hur selektorer kan optimera komponenters omrenderingar.

Zustand hjälper er att hantera delade data effektivt, vilket gör era Next.js-applikationer mer skalbara och enklare att underhålla.

Gratis att börja

Lär dig TypeScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 12
Lektioner: 48

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Tillstånd på klientsidan med Zustand/Jotai” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Next.js 15: fullstack-webbappar, inklusive ”Tillstånd på klientsidan med Zustand/Jotai”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Next.js 15: fullstack-webbappar innehåller totalt 4 lektioner.

Vad lär jag mig i ”Tillstånd på klientsidan med Zustand/Jotai”?

Implementera lättviktig och prestandaeffektiv global tillståndshantering på klientsidan med Zustand eller Jotai. Ni övar på Next.js 15: fullstack-webbappar med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Next.js 15: fullstack-webbappar?

Du behöver inga förkunskaper. Utbildningen i Next.js 15: fullstack-webbappar på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Tillstånd på klientsidan med Zustand/Jotai”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Next.js 15: fullstack-webbappar-lektionen?

Ja. Varje Next.js 15: fullstack-webbappar-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

React Query för server state
Tillstånd på klientsidan med Zustand/Jotai
Strategier för cachning på serversidan
Optimistiska uppdateringar och ogiltigförklaring av cache

← Tillbaka till Next.js 15: fullstack-webbappar