Lección 6 de 12 · Lectura y práctica

useReducer: Máquinas de Estado para Componentes

useReducer: máquinas de estado para componentes useReducer ayuda cuando el estado de un componente tiene muchas transiciones posibles. En lugar de repartir lógica en varios setState, centralizás cambios en un reducer que recibe.

Del concepto a la práctica

Taller de esta lección

useReducer ayuda a hacer visibles las transiciones válidas. En un formulario de entrega, idle, saving, saved y error describen estados mutuamente comprensibles; cada acción debe producir un nuevo objeto y conservar solo los datos que todavía tienen sentido.

Ejemplo resuelto

jsx

const initial = {status:"idle", message:""};
function reducer(state, action) {
  if (action.type === "save" && state.status !== "saving") return {status:"saving", message:""};
  if (action.type === "success" && state.status === "saving") return {status:"saved", message:action.message};
  if (action.type === "failure" && state.status === "saving") return {status:"error", message:action.message};
  return state;
}

reducer(reducer(initial,{type:"save"}),{type:"success",message:"Pedido 18 guardado"}) produce saved con ese mensaje.

Pruébalo

Ejecuta save desde initial.
Aplica después success con “Pedido 18 guardado”.
Comprueba que el estado final tiene status:"saved".

Comprueba tu resultado

Error frecuente: modificar state.status directamente. Corrígelo devolviendo objetos nuevos.

Ejercicio: aplica save y después prueba failure con “Sin conexión”; el resultado esperado es error, conserva exactamente ese mensaje y no altera initial.

Success o failure desde idle no representan un guardado iniciado: conserva el estado inicial para esas acciones fuera de secuencia. Un reducer no constituye automáticamente una máquina con transiciones válidas; las condiciones del ejemplo hacen explícita esa política.

Estado con tarea t1 pendiente y acción TOGGLE t1 entran en un reducer puro; sale un nuevo estado con done true, sin mutación ni efectos secundarios. — **El reducer decide la transición**
El reducer recibe estado y acción y devuelve el próximo estado sin modificar el anterior. TOGGLE de t1 cambia pendiente a completa; la red y otras consecuencias quedan fuera de esa función pura.
Ver la infografía en tamaño completo ↗

useReducer: máquinas de estado para componentes

useReducer ayuda cuando el estado de un componente tiene muchas transiciones posibles. En lugar de repartir lógica en varios setState, centralizás cambios en un reducer que recibe estado actual y una acción.

Cuándo usar useReducer

Cuando el nuevo estado depende del estado anterior.
Cuando hay varias acciones: cargar, éxito, error, reset, editar, guardar.
Cuando querés que la lógica sea testeable como función pura.
Cuando el componente ya tiene demasiados useState relacionados.

const initialState = { status: "idle", data: null, error: null };

function reducer(state, action) {
  switch (action.type) {
    case "loading":
      return { ...state, status: "loading", error: null };
    case "success":
      return { status: "success", data: action.payload, error: null };
    case "error":
      return { ...state, status: "error", error: action.error };
    case "reset":
      return initialState;
    default:
      return state;
  }
}

Regla práctica

Si te cuesta nombrar las acciones, todavía no entendés bien el flujo del componente. Escribí primero los estados posibles y después las transiciones.

Ejercicio: formulario con reducer

Convertí un formulario con estados separados de loading, error, success y valores a un reducer. Agregá acciones para editar campo, enviar, guardar con éxito y fallar.

Mini-rúbrica

El reducer no muta el estado original.
Las acciones tienen nombres claros.
El componente queda más legible que antes.

Sigue con React Intermedio: Patrones y Optimización

Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.

Ver curso y opciones de acceso Ya soy estudiante

Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.

← Anterior: Context API: Estado Global sin Complejidades Siguiente: Patrón Provider: Inyección de Dependencias →Entrar y guardar mi progreso