Uma action é um objeto simples descrevendo o que aconteceu; um reducer é uma função pura que recebe o estado atual e uma action e retorna o próximo estado. Juntos implementam transições de estado previsíveis.
{ : , : { : , : } }
{ : , : }
Actions não fazem nada — são descrições declarativas de eventos. Nomeá-las como fatos no passado ("added", "toggled") reflete que elas registram o que aconteceu.
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
}
}
A assinatura de um reducer é (state, action) => newState. Deve retornar um novo objeto/array de estado (imutavelmente), nunca mutar a entrada.
Uma função pura: (1) retorna a mesma saída para a mesma entrada, e (2) não tem efeitos colaterais. Reducers devem seguir ambas as regras:
// ❌ 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
}
A pureza ativa as funcionalidades características do Redux:
✓ 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
Efeitos colaterais (chamadas de API, logging, aleatoriedade) pertencem a middleware (thunks/sagas) ou effects — nunca em reducers.
O modelo action/reducer é o coração do gerenciamento de estado estilo Redux e a razão pela qual é tão debugável e testável.
A exigência de pureza não é arbitrária: é o que torna possível time-travel debugging, replay de actions e unit testing trivial, e é por isso que efeitos colaterais devem viver em outro lugar.
Esse padrão imutável orientado por funções puras recorre pelo Redux, NgRx, useReducer e além — entendê-lo (e a disciplina de manter reducers puros) é fundamental para estado previsível.