Una action es un objeto simple que describe qué sucedió; un reducer es una función pura que toma el estado actual y una action y devuelve el estado siguiente. Juntos implementan transiciones de estado predecibles.
{ : , : { : , : } }
{ : , : }
Las actions no hacen nada — son descripciones declarativas de eventos. Nombrarlas como hechos en pasado ("añadido", "alternado") refleja que registran lo que sucedió.
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
}
}
La firma de un reducer es (state, action) => newState. Debe devolver un objeto/array de estado nuevo (inmutablemente), nunca mutar la entrada.
Una función pura: (1) devuelve la misma salida para la misma entrada y (2) no tiene efectos secundarios. Los reducers deben seguir ambas reglas:
// ❌ 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
}
La pureza habilita las características distintivas de 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
Los efectos secundarios (llamadas API, logging, aleatoriedad) pertenecen al middleware (thunks/sagas) o effects — nunca en reducers.
El modelo action/reducer es el corazón de la gestión de estado al estilo Redux y la razón por la que es tan depurable y verificable.
El requisito de pureza no es arbitrario: es lo que hace posible la depuración de viajes en el tiempo, la repetición de acciones y las pruebas unitarias triviales, y es por eso que los efectos secundarios deben vivir en otro lugar.
Este patrón impulsado por funciones puras y actualización inmutable se repite en Redux, NgRx, useReducer y más allá — entenderlo (y la disciplina de mantener puros los reducers) es fundamental para un estado predecible.