useReducer für komplexen State
Modellieren Sie State-Übergänge mit einer Reducer-Funktion, dispatchen Sie Action-Objekte und bevorzugen Sie useReducer gegenüber useState, wenn die State-Logik komplexer wird.
useReducer für komplexen State ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Wenn useState nicht ausreicht
Wenn Zustandsübergänge komplexe Logik, mehrere zusammengehörige Werte oder Bedingungen umfassen, bei denen der neue Zustand auf nicht triviale Weise vom vorherigen abhängt, ist useReducer eine übersichtlichere Wahl als mehrere Aufrufe von useState.
Muster für Reducer-Funktionen
Ein Reducer ist eine reine Funktion: (state, action) => newState. Sie erhält den aktuellen Zustand und ein Action-Objekt und gibt den nächsten Zustand zurück. Keine Mutationen — geben Sie immer ein neues Objekt zurück.
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;
}
}Syntax von useReducer
useReducer(reducer, initialState) gibt den aktuellen Zustand und eine dispatch-Funktion zurück. Rufen Sie dispatch mit einem Action-Objekt auf, um einen Zustandsübergang auszulösen.
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>
);
}Typisierte Actions — diskriminierte Union-Typen
Verwenden Sie in TypeScript diskriminierte Union-Typen für Actions, um im switch des Reducers eine vollständige Typprüfung zu erhalten.
type CartAction =
| { type: 'ADD_ITEM'; item: CartItem }
| { type: 'REMOVE_ITEM'; id: string }
| { type: 'SET_QUANTITY'; id: string; qty: number }
| { type: 'CLEAR' };Beispiel für komplexen Zustand: Warenkorb
Ein Warenkorb mit Funktionen zum Hinzufügen, Entfernen und Aktualisieren der Menge ist ein idealer Anwendungsfall für 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 bleibt stabil
Die dispatch-Funktion ist stabil — sie ändert sich zwischen Renderings nicht. Sie können sie sicher als Prop übergeben oder als useEffect-Abhängigkeit verwenden, ohne dadurch erneute Ausführungen auszulösen.
useReducer und useContext kombinieren
Ein leistungsfähiges Muster: Ein Context stellt sowohl den Zustand als auch dispatch bereit. Dadurch kann jeder Consumer den Zustand auslesen oder Actions auslösen, ohne Props über mehrere Ebenen weiterreichen zu müssen.
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 oder useState
Wählen Sie useReducer, wenn der Zustand mehrere Teilwerte hat, der nächste Zustand auf komplexe Weise vom vorherigen abhängt, es viele ausdrücklich benannte Übergänge gibt oder Sie die Zustandslogik unabhängig von der Komponente testen möchten.
Reducer isoliert testen
Da Reducer reine Funktionen sind, lassen sie sich problemlos testen, ohne eine Komponente zu rendern.
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 für unveränderliche Aktualisierungen
Die Bibliothek immer ermöglicht Code, der wie eine Mutation aussieht, aber einen neuen unveränderlichen Zustand erzeugt. Das ist bei komplexen Aktualisierungen verschachtelter Objekte in Reducern nützlich.
Kurze Prüfung
Wie lautet die Funktionssignatur eines Reducers?
Zusammenfassung: useReducer
(state, action) => newState — rein, ohne Mutationen. useReducer(reducer, initial) gibt [state, dispatch] zurück. Verwenden Sie diskriminierte Union-Typen für Actions, um Typsicherheit zu gewährleisten. dispatch ist stabil. useReducer eignet sich hervorragend für komplexe Zustände mit vielen Übergängen. Kombinieren Sie ihn mit useContext für die Verwaltung globaler Zustände. Testen Sie Reducer unabhängig als reine Funktionen.
Häufig gestellte Fragen
Ist die Lektion „useReducer für komplexen State“ kostenlos?
Ja — der vollständige Text von „useReducer für komplexen State“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „useReducer für komplexen State“?
Modellieren Sie State-Übergänge mit einer Reducer-Funktion, dispatchen Sie Action-Objekte und bevorzugen Sie useReducer gegenüber useState, wenn die State-Logik komplexer wird. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „useReducer für komplexen State“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- useContext für globalen State
- useReducer für komplexen State
- useMemo und useCallback für Performance
- Custom Hooks: wiederverwendbare Logik extrahieren