Global tilstand med Zustand
Integrer Zustand, et lettvektsbibliotek for tilstandshåndtering, som en kraftig og fleksibel løsning for global tilstand.
Global tilstand med Zustand er en gratis leksjon i Next.js 15 fullstack (App Router + Server Actions) på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Next.js 15 fullstack (App Router + Server Actions), og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Next.js 15 fullstack (App Router + Server Actions) inneholder totalt 4 leksjoner.
Bli kjent med Zustand for global tilstand
Velkommen til Zustand! Det er en liten, rask og skalerbar løsning for tilstandshåndtering i React- og Next.js-applikasjoner.
I motsetning til enkelte andre biblioteker er Zustand kjent for enkelhet og minimalt med boilerplate, noe som gjør det enkelt å lære og bruke.
- Enkelt: Bruker et enkelt API basert på React-hooks.
- Raskt: Optimalisert for ytelse og unngår unødvendige nye renderinger.
- Skalerbart: Fungerer godt for både små apper og store, komplekse prosjekter.
Hvorfor global tilstand er viktig
I større applikasjoner trenger du ofte å dele data mellom mange komponenter som ikke er direkte koblet sammen (f.eks. en brukers innloggingsstatus eller varer i handlekurven).
Uten global tilstand kan du ende opp med «prop drilling» – der props sendes gjennom mange lag med komponenter, noe som kan bli rotete og vanskelig å vedlikeholde.
Globale tilstands-biblioteker som Zustand løser dette ved å tilby et sentralt sted for lagring og håndtering av data som er tilgjengelige fra alle komponenter.
Installer Zustand i prosjektet ditt
Det er enkelt å komme i gang med Zustand. Du trenger bare å installere det ved hjelp av den foretrukne pakkebehandleren din.
Åpne terminalen i prosjektmappen for Next.js og kjør en av følgende kommandoer:
- npm:
npm install zustand - yarn:
yarn add zustand - pnpm:
pnpm add zustand
Når det er installert, er du klar til å opprette din første store!
Bygg din første Zustand-store
En Zustand-store opprettes ved hjelp av create-funksjonen. Denne funksjonen tar imot en callback som definerer starttilstanden og eventuelle funksjoner (handlinger) som endrer denne tilstanden.
set-argumentet i callbacken brukes til å oppdatere store-ens tilstand. La oss definere en enkel teller-store:
import { create } from 'zustand';
import React from 'react';
// Define your store
const useCounterStore = create((set) => ({
count: 0, // Initial state
}));
// A dummy component to make it runnable
function StoreDefined() {
return <p>Zustand store created!</p>;
}
export default function App() {
return <StoreDefined />;
}Få tilgang til store-tilstand i React
Nå som vi har en store, skal vi lære hvordan vi leser tilstanden i en React-komponent. Zustand tilbyr en hook (generert fra store-en din) som du kan kalle direkte.
Du kan også bruke en «selector»-funksjon til å velge bare de bestemte delene av tilstanden du trenger, slik at du unngår unødvendige nye renderinger.
import { create } from 'zustand';
import React from 'react';
const useCounterStore = create((set) => ({
count: 0,
}));
// This component reads the 'count' from the store
function CountDisplay() {
const count = useCounterStore((state) => state.count);
return (
<div>
<h3>Current Count:</h3>
<p>{count}</p>
</div>
);
}
export default function App() {
return <CountDisplay />;
}Handlinger for å endre store-tilstanden
Store-er brukes ikke bare til å lese data; de definerer også handlingene som kan endre tilstanden. Disse handlingene er funksjoner i create-kallet ditt som bruker set-argumentet.
La oss legge til handlingene increment og decrement i teller-store-en vår og bruke dem med knapper i en komponent:
import { create } from 'zustand';
import React from 'react';
const useCounterStore = create((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
decrement: () => set((state) => ({ count: state.count - 1 })),
}));
function CounterApp() {
// Select both state and actions
const { count, increment, decrement } = useCounterStore();
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
}
export default function App() {
return <CounterApp />;
}Optimaliser med tilstandsselectorer
Hvis store-en din inneholder mange verdier, kan en komponent som bare bruker en liten del av tilstanden, likevel rendres på nytt når andre, urelaterte deler av tilstanden endres.
Zustands selector-mønster bidrar til å hindre dette. Ved å sende en selector-funksjon til useStore vil komponenten din bare rendres på nytt hvis den *valgte* delen av tilstanden endres.
import { create } from 'zustand';
import React from 'react';
const useUserProfileStore = create((set) => ({
username: "Coddy",
email: "coddy@example.com",
loggedIn: true,
updateUsername: (name) => set({ username: name }),
}));
// This component only cares about the username
function UsernameDisplay() {
// Select only 'username' for efficient rendering
const username = useUserProfileStore((state) => state.username);
return (
<div>
<p>Hello, {username}!</p>
</div>
);
}
export default function App() {
return <UsernameDisplay />;
}Håndter asynkrone oppdateringer
Zustand-handlinger kan enkelt håndtere asynkrone operasjoner, for eksempel henting av data fra et API. Du utfører ganske enkelt den asynkrone logikken i handlingen og kaller deretter set når dataene er klare.
Dette gjør det mulig å håndtere lastetilstander eller oppdatere data etter at nettverksforespørsler er fullført. Her er et eksempel som simulerer en forsinket oppdatering:
import { create } from 'zustand';
import React from 'react';
const useLoadingStore = create((set) => ({
isLoading: false,
message: "",
fetchData: async () => {
set({ isLoading: true, message: "Loading..." });
// Simulate an API call
await new Promise((resolve) => setTimeout(resolve, 1500));
set({ isLoading: false, message: "Data Loaded!" });
},
}));
function DataFetcher() {
const { isLoading, message, fetchData } = useLoadingStore();
return (
<div>
<p>{message}</p>
<button onClick={fetchData} disabled={isLoading}>
{isLoading ? "Fetching..." : "Fetch Data"}
</button>
</div>
);
}
export default function App() {
return <DataFetcher />;
}Strukturer Zustand-store-ene dine
For større Next.js-applikasjoner er det god praksis å organisere Zustand-store-ene. I stedet for å definere alle store-ene i én fil kan du opprette en egen fil for hver store (f.eks. stores/userStore.js, stores/cartStore.js).
Dette holder kodebasen ryddig og modulær, og gjør den enklere å navigere i. Deretter kan du importere og bruke disse store-hookene der det trengs.
Test Zustand-ferdighetene dine
Se på følgende Zustand-store-definisjon:
import { create } from 'zustand';
const useSettingsStore = create((set) => ({
theme: 'light',
fontSize: 16,
toggleTheme: () => set((state) => ({
theme: state.theme === 'light' ? 'dark' : 'light',
})),
setFontSize: (size) => set({ fontSize: size }),
}));
Hvis du kaller useSettingsStore((state) => state.theme) i en komponent, hva blir startverdien?
Zustand: En rask gjennomgang
Godt jobbet! Du har utforsket Zustand, et kraftig og lett bibliotek for håndtering av global tilstand i Next.js.
Du har lært hvordan du kan:
- Opprette en enkel Zustand-store.
- Lese tilstand og sende handlinger fra komponenter.
- Optimalisere ytelsen ved hjelp av selectorer.
- Håndtere asynkrone oppdateringer.
Zustands enkelhet og fleksibilitet gjør det til et utmerket valg for håndtering av global tilstand på klientsiden i applikasjonene dine. Fortsett å øve for å mestre det!
Lær deg TypeScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 22
- Leksjoner
- 88
Ofte stilte spørsmål
Er leksjonen «Global tilstand med Zustand» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Next.js 15 fullstack (App Router + Server Actions), inkludert «Global tilstand med Zustand», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Next.js 15 fullstack (App Router + Server Actions) inneholder totalt 4 leksjoner.
Hva lærer jeg i «Global tilstand med Zustand»?
Integrer Zustand, et lettvektsbibliotek for tilstandshåndtering, som en kraftig og fleksibel løsning for global tilstand. Du øver på Next.js 15 fullstack (App Router + Server Actions) med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Next.js 15 fullstack (App Router + Server Actions)?
Ingen tidligere erfaring er nødvendig. Next.js 15 fullstack (App Router + Server Actions) på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «Global tilstand med Zustand»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Next.js 15 fullstack (App Router + Server Actions)-leksjonen?
Ja. Alle Next.js 15 fullstack (App Router + Server Actions)-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- React Context API
- Global tilstand med Zustand
- Håndtering av servertilstand
- Lagre tilstand i localStorage