🔄 useReducer: manejo avanzado de estados en React

🔄 useReducer en React: manejo avanzado de estados

El Hook useReducer es una alternativa avanzada a useState para manejar estados más complejos. Es especialmente útil cuando la lógica de actualización del estado involucra múltiples subvalores o acciones.

---

1️⃣ ¿Qué es useReducer?

Este Hook sigue el mismo patrón que los reducers en Redux: se basa en una función reductora que recibe el estado actual y una acción, y devuelve el nuevo estado.

const [state, dispatch] = useReducer(reducer, estadoInicial);
  

Donde:

• ⚙️ reducer → función que define cómo cambia el estado.
• 🧩 estadoInicial → valor inicial del estado.
• 🚀 dispatch → función que se usa para enviar acciones al reducer.

---

2️⃣ Ejemplo básico de contador con useReducer

import { useReducer } from "react";

const initialState = { contador: 0 };

function reducer(state, action) {
  switch (action.type) {
    case "incrementar":
      return { contador: state.contador + 1 };
    case "decrementar":
      return { contador: state.contador - 1 };
    case "reset":
      return { contador: 0 };
    default:
      return state;
  }
}

function ContadorReducer() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <h2>Contador: {state.contador}</h2>
      <button onClick={() => dispatch({ type: "incrementar" })}>+</button>
      <button onClick={() => dispatch({ type: "decrementar" })}>-</button>
      <button onClick={() => dispatch({ type: "reset" })}>Reset</button>
    </div>
  );
}

export default ContadorReducer;
  

Ejemplo visual de contador con useReducer

Contador: 0

---

3️⃣ Cuándo usar useReducer en lugar de useState

• 🧩 Cuando el estado tiene múltiples subvalores relacionados.
• ⚙️ Cuando las actualizaciones de estado siguen una lógica compleja.
• 📦 Cuando quieres separar la lógica del estado del componente.

💡 Consejo: usa useReducer si tu componente empieza a tener varios useState o múltiples funciones de actualización.

---

4️⃣ Ejemplo avanzado: manejar formulario con useReducer

En este ejemplo, gestionamos el estado de un formulario de usuario con varias propiedades.

import { useReducer } from "react";

const initialForm = { nombre: "", email: "" };

function formReducer(state, action) {
  switch (action.type) {
    case "cambiar_campo":
      return { ...state, [action.campo]: action.valor };
    case "reset":
      return initialForm;
    default:
      return state;
  }
}

function FormularioReducer() {
  const [form, dispatch] = useReducer(formReducer, initialForm);

  const manejarCambio = (e) => {
    dispatch({
      type: "cambiar_campo",
      campo: e.target.name,
      valor: e.target.value
    });
  };

  return (
    <form>
      <input
        name="nombre"
        value={form.nombre}
        onChange={manejarCambio}
        placeholder="Nombre"
      />
      <input
        name="email"
        value={form.email}
        onChange={manejarCambio}
        placeholder="Email"
      />
      <button type="button" onClick={() => dispatch({ type: "reset" })}>
        Reset
      </button>
    </form>
  );
}

export default FormularioReducer;
  

Ejemplo visual: formulario con useReducer

---

5️⃣ Resumen

• 🔁 useReducer es ideal para estados complejos.
• 🧠 Separa la lógica de actualización del componente.
• ⚡ Facilita el mantenimiento en proyectos grandes.

En resumen, useReducer es una poderosa herramienta cuando los estados y sus transiciones comienzan a crecer en complejidad. Ayuda a mantener el código organizado, predecible y más fácil de depurar.

← Volver al índice