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 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.