Zustand for lettvekts React-state
Opprett en Zustand-store med create(), les state med hooken, oppdater den med actions, og dra nytte av et minimalt API uten boilerplate.
Zustand for lettvekts React-state er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.
Hva er Zustand?
Zustand er et minimalistisk og raskt bibliotek for tilstandsbehandling i React. Hele API-flaten er svært liten: opprett en store, og bruk en hook til å lese og oppdatere den. Ingen reducers, ingen actions og ingen standardkode.
Opprette en store
create() definerer store med tilstand og actions som et vanlig objekt. Den returnerte verdien er en hook.
import { create } from 'zustand';
interface CounterStore {
count: number;
increment: () => void;
decrement: () => void;
reset: () => void;
}
export const useCounterStore = create<CounterStore>((set) => ({
count: 0,
increment: () => set(state => ({ count: state.count + 1 })),
decrement: () => set(state => ({ count: state.count - 1 })),
reset: () => set({ count: 0 }),
}));Lese tilstand fra store
Kall hooken med en selector-funksjon for å abonnere på bestemte deler av tilstanden. Komponenten gjengis bare på nytt når den valgte delen endres.
function Counter() {
const count = useCounterStore(state => state.count);
return <p>Count: {count}</p>;
}Lese actions
Velg actions på samme måte. Actions endres ikke, så det å velge dem fører ikke til ekstra gjengivelse.
function Controls() {
const { increment, decrement } = useCounterStore(
state => ({ increment: state.increment, decrement: state.decrement })
);
return (
<div>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
</div>
);
}Oppdatere tilstand med set()
Funksjonen set() slår sammen oppdateringer grunt (slik setState gjør i React-klassekomponenter). Send inn en funksjon for oppdateringer som avhenger av den forrige tilstanden.
// Merge:
set({ loading: true });
// Function for dependent updates:
set(state => ({ count: state.count + 1 }));
// Replace entirely (replace: true):
set({ count: 0, loading: false }, true);Asynkrone actions
Actions i Zustand kan være asynkrone – kall bare set() etter at den asynkrone operasjonen er awaitet.
export const useUsersStore = create<UsersStore>((set) => ({
users: [],
loading: false,
fetchUsers: async () => {
set({ loading: true });
const users = await fetch('/api/users').then(r => r.json());
set({ users, loading: false });
}
}));Slices – sette sammen store
Del en stor store opp i slices (separate objekter), og kombiner dem. Zustand-mønsteret krever ikke slice-abstraksjonen, men den er en ryddig måte å organisere store på.
Middleware: persist
persist-middleware lagrer Zustand-tilstanden i localStorage og gjenoppretter den ved lasting – med minimalt oppsett.
import { persist } from 'zustand/middleware';
export const useSettingsStore = create<Settings>(
persist(
(set) => ({
theme: 'light',
setTheme: (theme) => set({ theme })
}),
{ name: 'app-settings' } // localStorage key
)
);Middleware: devtools
Legg til støtte for Redux DevTools i Zustand med devtools-middleware. De får full logging av actions og tidsreise.
Zustand kontra Redux Toolkit
Zustand: minimalistisk, ingen standardkode, raskt å sette opp og godt egnet for små til mellomstore apper. RTK: strukturert, skalerbart, med DevTools i toppklasse og bedre egnet for store team. Begge er gode valg – enkelheten i Zustand vinner for de fleste apper.
Selectors og ytelse
Velg alltid den minste delen av tilstanden komponenten trenger. Hvis hele tilstandsobjektet velges, gjengis komponenten på nytt ved enhver endring i store. Bruk shallow fra zustand/shallow ved valg av flere egenskaper.
import { shallow } from 'zustand/shallow';
const { theme, font } = useSettingsStore(
state => ({ theme: state.theme, font: state.font }),
shallow // compare each property shallowly
);Hurtigsjekk
Hvordan oppretter De en Zustand-store som hele React-appen kan bruke?
Oppsummering: Zustand
create() definerer tilstand og actions. Den returnerte verdien er en hook. Velg deler av tilstanden for å unngå unødvendig gjengivelse. set() slår sammen tilstandsoppdateringer. Asynkrone actions kaller set() etter await. persist-middleware brukes for localStorage. devtools brukes for integrasjon med Redux DevTools. Ingen Provider er nødvendig.
Lær deg HTML 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
- 41
- Leksjoner
- 163
Ofte stilte spørsmål
Er leksjonen «Zustand for lettvekts React-state» gratis?
Ja – hele teksten i «Zustand for lettvekts React-state» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Zustand for lettvekts React-state»?
Opprett en Zustand-store med create(), les state med hooken, oppdater den med actions, og dra nytte av et minimalt API uten boilerplate. Du øver på Frontend Academy 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 Frontend Academy?
Ingen tidligere erfaring er nødvendig. Frontend Academy 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 «Zustand for lettvekts React-state»?
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 Frontend Academy-leksjonen?
Ja. Alle Frontend Academy-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
- Redux Toolkit: createSlice og configureStore
- Zustand for lettvekts React-state
- Pinia for Vue: defineStore og storeToRefs
- Når skal global eller lokal state brukes