PricingLoginStart free
React Academy · Lektion

Opret dit første Zustand-store

Definér et store med create(), tilføj state slices og actions, og brug det med useStore.

Lektion 1 af 413 trin

Opret dit første Zustand-store er en gratis React Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i React Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Academy-kurset indeholder 4 lektioner i alt.

Velkommen

I denne lektion skal du oprette din første Zustand-store med create(), definere tilstandsudsnit og handlinger og bruge storen i React-komponenter.

Hvad er Zustand?

Zustand er et minimalt bibliotek til tilstandshåndtering uden faste konventioner. En store er et almindeligt JavaScript-objekt med tilstand og funktioner. Komponenter abonnerer på den via et hook. Ingen providers, ingen reducers, ingen overflødig standardkode.

Installation

Installér Zustand. Det har ingen peer-afhængigheder.
npm install zustand

Oprettelse af en store

Kald create() med en funktion, der returnerer den oprindelige tilstand og handlingerne. Funktionen modtager en `set`-hjælpefunktion til at opdatere tilstanden.
import { create } from 'zustand';

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

Brug af storen i en komponent

Kald store-hooket i en vilkårlig komponent for at tilgå tilstand og handlinger. Du behøver ikke pakke komponenten ind i en Provider.
function Counter() {
  const count = useCounterStore(state => state.count);
  const increment = useCounterStore(state => state.increment);
  return (
    <>
      <p>{count}</p>
      <button onClick={increment}>+1</button>
    </>
  );
}

Selectorsyntaks

Giv store-hooket en selector-funktion for kun at abonnere på det tilstandsudsnit, du har brug for. Komponenten gengives kun igen, når den valgte værdi ændres.
const count = useCounterStore(s => s.count);
const reset = useCounterStore(s => s.reset);
// Only re-renders when count changes, not the whole store

Opdatering af tilstand med set

`set`-funktionen fletter nye værdier overfladisk ind i storen. Du kan give den et objekt eller en funktion, der modtager den aktuelle tilstand og returnerer delvise opdateringer.
set({ count: 0 }) // direct set
set(state => ({ count: state.count + 1 })) // functional update

Asynkrone handlinger

Handlinger kan være asynkrone. Kald set efter at have afventet data. Du behøver ikke middleware — skriv bare almindelige asynkrone funktioner.
const useUserStore = create((set) => ({
  user: null,
  fetchUser: async (id) => {
    const data = await fetch('/api/user/' + id).then(r => r.json());
    set({ user: data });
  },
}));

Opdatering af indlejret tilstand

For indlejrede objekter skal du manuelt sprede det ydre niveau eller bruge immer-middleware til dybe ændringer. Som standard fletter set kun nøgler på øverste niveau.
set(state => ({
  user: { ...state.user, name: 'Alice' }
}));

Læsning af storen uden for React

Tilgå store-tilstanden uden for en komponent med getState(), og abonnér på ændringer med subscribe(). Det er nyttigt til test og ikke-React-kode.
const count = useCounterStore.getState().count;
useCounterStore.subscribe(state => console.log(state.count));

Hurtigt tjek

Hvad gør set-funktionen i en Zustand-store?
Besvar den i den interaktive lektion

Opsummering

Opret en Zustand-store med create((set) => ({ state, actions })). Brug selectorsyntaks i komponenter for at abonnere på tilstandsudsnit. Handlinger kalder set() for at opdatere tilstanden. Det fungerer asynkront og uden for React med getState().

Næste lektion

Næste lektion: **Selectors og forebyggelse af unødvendige gengivelser** — du vil udtrække bestemte tilstandsudsnit, så komponenter kun gengives igen, når det er nødvendigt.
Gratis at komme i gang

Lær React 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
88
Lektioner
324
Start gratisSe hele kurset

Ofte stillede spørgsmål

Er lektionen “Opret dit første Zustand-store” gratis?

Ja — hele teksten til “Opret dit første Zustand-store” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af React Academy-kurset, skal du opgradere til CoddyKit PRO. React Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Opret dit første Zustand-store”?

Definér et store med create(), tilføj state slices og actions, og brug det med useStore. Du øver dig i React Academy 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å React Academy?

Der kræves ingen tidligere erfaring. React Academy 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 1 af 4.

Hvor lang tid tager lektionen “Opret dit første Zustand-store”?

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 React Academy-lektion?

Ja. Alle React Academy-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

  1. Opret dit første Zustand-store
  2. Selectorer og forebyggelse af unødvendige genrenderinger
  3. Bevaring af tilstand med Persist-middleware
  4. Zustand DevTools og test af stores
← Tilbage til React Academy