useReducer til kompleks state
Modellér state-overgange med en reducer-funktion, dispatch action-objekter, og foretræk useReducer frem for useState, når state-logikken bliver kompleks.
useReducer til kompleks state er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 2 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 Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.
Når useState ikke er nok
Når tilstandsovergange involverer kompleks logik, flere relaterede værdier eller betingelser, hvor den nye tilstand afhænger af den forrige på ikke-trivielle måder, er useReducer et renere valg end flere kald til useState.
Mønster for reducerfunktioner
En reducer er en ren funktion: (state, action) => newState. Den tager den aktuelle tilstand og et handlingsobjekt og returnerer den næste tilstand. Ingen mutationer — returnér altid et nyt objekt.
type Action =
| { type: 'increment' }
| { type: 'decrement' }
| { type: 'reset'; payload: number };
function counterReducer(state: number, action: Action): number {
switch (action.type) {
case 'increment': return state + 1;
case 'decrement': return state - 1;
case 'reset': return action.payload;
default: return state;
}
}Syntaks for useReducer
useReducer(reducer, initialState) returnerer den aktuelle tilstand og en dispatch-funktion. Kald dispatch med et handlingsobjekt for at udløse en tilstandsovergang.
function Counter() {
const [count, dispatch] = useReducer(counterReducer, 0);
return (
<div>
<p>{count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
<button onClick={() => dispatch({ type: 'reset', payload: 0 })}>Reset</button>
</div>
);
}Typede handlinger — diskriminerede unioner
Brug diskriminerede unionstyper i TypeScript til handlinger for at få udtømmende typekontrol i reducerens switch.
type CartAction =
| { type: 'ADD_ITEM'; item: CartItem }
| { type: 'REMOVE_ITEM'; id: string }
| { type: 'SET_QUANTITY'; id: string; qty: number }
| { type: 'CLEAR' };Eksempel på kompleks tilstand: indkøbskurv
En indkøbskurv med funktioner til at tilføje, fjerne og opdatere antal er et perfekt anvendelsesområde for useReducer.
interface CartState {
items: CartItem[];
total: number;
}
function cartReducer(state: CartState, action: CartAction): CartState {
switch (action.type) {
case 'ADD_ITEM': {
const exists = state.items.find(i => i.id === action.item.id);
if (exists) {
const items = state.items.map(i =>
i.id === action.item.id ? { ...i, qty: i.qty + 1 } : i
);
return { ...state, items, total: calcTotal(items) };
}
const items = [...state.items, { ...action.item, qty: 1 }];
return { ...state, items, total: calcTotal(items) };
}
case 'CLEAR': return { items: [], total: 0 };
default: return state;
}
}dispatch er stabil
Funktionen dispatch er stabil — den ændres ikke mellem gengivelser. Det er sikkert at sende den som en prop eller bruge den som en useEffect-afhængighed uden at udløse nye kørsler.
Kombinér useReducer + useContext
Et stærkt mønster: En kontekst leverer både tilstanden og dispatch, så enhver forbruger kan læse tilstanden eller sende handlinger uden at skulle sende props gennem mellemled.
const CartContext = createContext<{ state: CartState; dispatch: Dispatch<CartAction> } | null>(null);
function CartProvider({ children }: { children: React.ReactNode }) {
const [state, dispatch] = useReducer(cartReducer, { items: [], total: 0 });
return <CartContext.Provider value={{ state, dispatch }}>{children}</CartContext.Provider>;
}useReducer kontra useState
Vælg useReducer når: tilstanden har flere delværdier, den næste tilstand afhænger af den forrige på komplekse måder, der er mange og eksplicit navngivne overgange, eller du vil teste tilstandslogikken adskilt fra komponenten.
Test af reducerfunktioner isoleret
Da reducerfunktioner er rene funktioner, kan de uden videre testes uden at gengive nogen komponent.
test('increment action increases count', () => {
expect(counterReducer(0, { type: 'increment' })).toBe(1);
expect(counterReducer(5, { type: 'increment' })).toBe(6);
});
test('reset action sets count to payload', () => {
expect(counterReducer(42, { type: 'reset', payload: 0 })).toBe(0);
});Immer til uforanderlige opdateringer
Biblioteket immer lader dig skrive kode, der ser ud til at ændre tilstanden, men som producerer en ny uforanderlig tilstand. Det er nyttigt til komplekse opdateringer af indlejrede objekter i reducerfunktioner.
Hurtigt tjek
Hvad er funktionssignaturen for en reducer?
Opsummering: useReducer
(state, action) => newState — ren, ingen mutationer. useReducer(reducer, initial) returnerer [state, dispatch]. Brug diskriminerede unionstyper til handlinger for sikkerhed. dispatch er stabil. Velegnet til kompleks tilstand med mange overgange. Kombinér med useContext til global tilstandshåndtering. Test reducerfunktioner uafhængigt som rene funktioner.
Lær HTML 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
- 41
- Lektioner
- 163
Ofte stillede spørgsmål
Er lektionen “useReducer til kompleks state” gratis?
Ja — hele teksten til “useReducer til kompleks state” 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 Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “useReducer til kompleks state”?
Modellér state-overgange med en reducer-funktion, dispatch action-objekter, og foretræk useReducer frem for useState, når state-logikken bliver kompleks. Du øver dig i Frontend 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å Frontend Academy?
Der kræves ingen tidligere erfaring. Frontend 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 2 af 4.
Hvor lang tid tager lektionen “useReducer til kompleks state”?
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 Frontend Academy-lektion?
Ja. Alle Frontend 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
- useContext til global state
- useReducer til kompleks state
- useMemo og useCallback til ydeevne
- Custom hooks: udtræk af genanvendelig logik