Een action is een eenvoudig object dat beschrijft wat er gebeurde; een reducer is een zuivere functie die de huidige state en een action neemt en de volgende state retourneert. Samen implementeren zij voorspelbare state-transities.
{ : , : { : , : } }
{ : , : }
Actions doen niets — het zijn declaratieve beschrijvingen van events. Het benoemen ervan in verleden tijd ("added", "toggled") weerspiegelt dat zij vastleggen wat er gebeurde.
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
}
}
De handtekening van een reducer is (state, action) => newState. Het moet een nieuwe state object/array retourneren (immutabel), nooit de invoer muteren.
Een zuivere functie: (1) retourneert dezelfde uitvoer voor dezelfde invoer, en (2) heeft geen bijeffecten. Reducers moeten beide regels volgen:
// ❌ 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
}
Zuiverheid maakt Redux's karakteristieke functies mogelijk:
✓ 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
Bijeffecten (API-aanroepen, logging, willekeurigheid) horen thuis in middleware (thunks/sagas) of effects — nooit in reducers.
Het action/reducer-model is het hart van Redux-stijl state management en de reden waarom het zo debuggable en testable is.
De zuiverheidseis is niet willekeurig: het is wat mogelijk maakt time-travel debugging, action replay en triviale unit testing, en daarom moeten bijeffecten elders wonen.
Dit zuivere-functie-gestuurde, immutable update patroon komt terug in Redux, NgRx, useReducer en beyond — het begrijpen ervan (en de discipline van het zuiver houden van reducers) is fundamenteel voor voorspelbare state.