Eine action ist ein einfaches Objekt, das beschreibt, was passiert ist; ein reducer ist eine reine Funktion, die den aktuellen State und eine Action nimmt und den nächsten State zurückgibt. Zusammen implementieren sie vorhersehbare State-Übergänge.
{ : , : { : , : } }
{ : , : }
Actions tun nichts — sie sind deklarative Beschreibungen von Ereignissen. Sie in Vergangenheitsform zu benennen ("hinzugefügt", "umgeschaltet") spiegelt wider, dass sie aufzeichnen, was passiert ist.
function todosReducer(state = [], action) {
switch (action.type) {
case "todos/added":
return [...state, action.payload]; // new array
case "todos/toggled":
return state.map(t => // new array, new object for the changed one
t.id === action.payload ? { ...t, done: !t.done } : t
);
default:
return state; // unknown action → unchanged
}
}
Die Signatur eines Reducers ist (state, action) => newState. Er muss ein neues State-Objekt/Array zurückgeben (immutable), darf die Eingabe nie mutieren.
Eine reine Funktion: (1) gibt für die gleiche Eingabe die gleiche Ausgabe zurück und (2) hat keine Nebenwirkungen. Reducers müssen beide Regeln befolgen:
// ❌ NOT pure — breaks everything
function badReducer(state, action) {
state.value++; // ❌ mutates input (breaks change detection, time-travel)
fetch("/api/log"); // ❌ side effect (non-deterministic, untestable)
return { value: Math.random() }; // ❌ non-deterministic output
}
Reinheit ermöglicht Reduxs charakteristische Funktionen:
✓ Predictability — same state + action ALWAYS gives the same result
✓ Time-travel / replay — you can re-run actions to reproduce any state
✓ Testability — just call reducer(state, action) and assert; no mocks needed
✓ Change detection — returning new references lets the UI detect changes
Nebenwirkungen (API-Aufrufe, Logging, Zufälligkeit) gehören in Middleware (Thunks/Sagas) oder Effects — niemals in Reducers.
Das Action/Reducer-Modell ist das Herzstück der Redux-ähnlichen State-Verwaltung und der Grund, warum es so leicht zu debuggen und zu testen ist.
Die Reinheitsanforderung ist nicht willkürlich: Sie ermöglicht Time-Travel-Debugging, Action-Replay und triviale Unit-Tests, und sie ist der Grund, warum Nebenwirkungen woanders leben müssen.
Dieses von reinen Funktionen getriebene, unveränderliche Update-Muster tritt in Redux, NgRx, useReducer und darüber hinaus auf — es zu verstehen (und die Disziplin, Reducers rein zu halten) ist grundlegend für vorhersehbaren State.