Gestión del Estado Global en React con Context API y useReducer: Una Guía Completa

La gestión del estado en React puede volverse compleja a medida que las aplicaciones crecen. Para componentes que necesitan compartir información que no está directamente relacionada por un árbol de componentes (props drilling), se hace necesario un enfoque de estado global. Tradicionalmente, bibliotecas como Redux han dominado este espacio, pero con la introducción de la Context API y el hook useReducer en React, ahora tenemos una potente alternativa integrada.

Este tutorial te proporcionará una guía exhaustiva para implementar un sistema de gestión de estado global robusto y escalable, utilizando únicamente las herramientas nativas de React.

🚀 ¿Por qué Context API y useReducer?

Antes de sumergirnos en el código, es crucial entender por qué esta combinación es tan efectiva:

• Context API: Permite pasar datos a través del árbol de componentes sin tener que pasar props manualmente en cada nivel. Es ideal para datos "globales" como la configuración regional, el tema de la UI o un usuario autenticado.
• useReducer: Un hook alternativo a useState para una lógica de estado más compleja. Es especialmente útil cuando el estado tiene múltiples subvalores o cuando el próximo estado depende del anterior. Proporciona una forma predecible y organizada de manejar actualizaciones de estado, similar a Redux.

Juntos, forman una solución potente que puede reemplazar a Redux en muchas aplicaciones de tamaño mediano, reduciendo la necesidad de dependencias externas.

🛠️ Requisitos Previos

Para seguir este tutorial, necesitarás:

• Conocimientos básicos de React y JavaScript (ES6+).
• Node.js y npm/yarn instalados.
• Un editor de código como VS Code.

🎯 Paso 1: Inicializar un Proyecto React

Comenzaremos creando una nueva aplicación React. Abre tu terminal y ejecuta:

npx create-react-app react-global-state
cd react-global-state

Ahora, abre el proyecto en tu editor de código preferido.

📖 Paso 2: Entendiendo la Estructura del Estado Global

Imaginemos una aplicación de comercio electrónico simple donde necesitamos gestionar un carrito de compras. Nuestro estado global para el carrito podría incluir una lista de ítems, el total de ítems y el monto total. Las acciones que podríamos necesitar son ADD_ITEM, REMOVE_ITEM, UPDATE_QUANTITY y CLEAR_CART.

Vamos a organizar nuestro estado global en un archivo dedicado para el Contexto y el Reducer.

Crea una nueva carpeta src/context y dentro de ella, un archivo CartContext.js.

✨ Paso 3: Definiendo el Reducer (CartReducer.js)

El reducer es una función pura que toma el estado actual y una acción, y devuelve un nuevo estado. Es el corazón de cómo se actualiza nuestro estado.

Crea un nuevo archivo src/context/CartReducer.js:

// src/context/CartReducer.js

export const cartReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      {
        const existingItem = state.items.find(item => item.id === action.payload.id);
        if (existingItem) {
          return {
            ...state,
            items: state.items.map(item =>
              item.id === action.payload.id
                ? { ...item, quantity: item.quantity + action.payload.quantity }
                : item
            ),
            totalItems: state.totalItems + action.payload.quantity,
            totalAmount: state.totalAmount + (action.payload.price * action.payload.quantity)
          };
        } else {
          return {
            ...state,
            items: [...state.items, action.payload],
            totalItems: state.totalItems + action.payload.quantity,
            totalAmount: state.totalAmount + (action.payload.price * action.payload.quantity)
          };
        }
      }
    case 'REMOVE_ITEM':
      {
        const itemToRemove = state.items.find(item => item.id === action.payload);
        if (!itemToRemove) return state;

        return {
          ...state,
          items: state.items.filter(item => item.id !== action.payload),
          totalItems: state.totalItems - itemToRemove.quantity,
          totalAmount: state.totalAmount - (itemToRemove.price * itemToRemove.quantity)
        };
      }
    case 'UPDATE_QUANTITY':
      {
        return {
          ...state,
          items: state.items.map(item =>
            item.id === action.payload.id
              ? { ...item, quantity: action.payload.quantity }
              : item
          ),
          totalItems: state.items.reduce((acc, item) => acc + (item.id === action.payload.id ? action.payload.quantity : item.quantity), 0),
          totalAmount: state.items.reduce((acc, item) => acc + (item.id === action.payload.id ? item.price * action.payload.quantity : item.price * item.quantity), 0)
        };
      }
    case 'CLEAR_CART':
      return {
        ...state,
        items: [],
        totalItems: 0,
        totalAmount: 0
      };
    default:
      return state;
  }
};

export const initialState = {
  items: [],
  totalItems: 0,
  totalAmount: 0
};

🎯 Paso 4: Creando el Contexto y el Proveedor (CartContext.js)

Ahora, crearemos el Contexto que nuestros componentes usarán para acceder al estado y al dispatch del reducer, y un Proveedor que envolverá nuestra aplicación (o parte de ella) para hacer el estado disponible.

Modifica src/context/CartContext.js:

// src/context/CartContext.js
import React, { createContext, useReducer, useContext } from 'react';
import { cartReducer, initialState } from './CartReducer';

// 1. Crear el Contexto
export const CartContext = createContext();

// 2. Crear el Proveedor (Provider)
export const CartProvider = ({ children }) => {
  const [state, dispatch] = useReducer(cartReducer, initialState);

  return (
    <CartContext.Provider value={{ state, dispatch }}>
      {children}
    </CartContext.Provider>
  );
};

// 3. Crear un hook personalizado para un acceso más fácil (opcional, pero recomendado)
export const useCart = () => {
  const context = useContext(CartContext);
  if (context === undefined) {
    throw new Error('useCart must be used within a CartProvider');
  }
  return context;
};

Aquí tenemos tres partes clave:

1. createContext(): Crea el objeto Contexto. Este objeto tiene un componente Provider y un componente Consumer (aunque useContext es la forma moderna de consumir).
2. CartProvider: Este componente se encargará de gestionar el estado usando useReducer y de envolver a los hijos con CartContext.Provider, pasando el state y dispatch a todos sus descendientes.
3. useCart: Un hook personalizado que simplifica el consumo del contexto, haciéndolo más limpio y legible en nuestros componentes.

🪜 Paso 5: Integrando el Proveedor en la Aplicación

Para que el estado global esté disponible en nuestros componentes, necesitamos envolver la parte de nuestra aplicación que necesita acceso a él con el CartProvider.

Modifica src/App.js:

// src/App.js
import React from 'react';
import { CartProvider } from './context/CartContext';
import Header from './components/Header';
import ProductList from './components/ProductList';
import Cart from './components/Cart';

function App() {
  return (
    <CartProvider>
      <div style={{ fontFamily: 'Arial, sans-serif', padding: '20px' }}>
        <h1>Mi Tienda React</h1>
        <Header />
        <ProductList />
        <Cart />
      </div>
    </CartProvider>
  );
}

export default App;

🧩 Paso 6: Creando Componentes para Interactuar con el Estado

Ahora crearemos algunos componentes para demostrar cómo los componentes pueden leer y actualizar el estado del carrito.

6.1. Header.js (Componente para mostrar el total de ítems)

Crea src/components/Header.js:

// src/components/Header.js
import React from 'react';
import { useCart } from '../context/CartContext';

const Header = () => {
  const { state } = useCart();

  return (
    <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid #eee', paddingBottom: '10px' }}>
      <h2>Productos Disponibles</h2>
      <div>
        🛒 Carrito: <span style={{ fontWeight: 'bold' }}>{state.totalItems}</span> ítems
      </div>
    </header>
  );
};

export default Header;

6.2. ProductList.js (Componente para añadir ítems)

Crea src/components/ProductList.js:

// src/components/ProductList.js
import React from 'react';
import { useCart } from '../context/CartContext';

const products = [
  { id: 'p1', name: 'Teclado Mecánico', price: 75.00 },
  { id: 'p2', name: 'Ratón Gaming', price: 30.00 },
  { id: 'p3', name: 'Monitor Curvo', price: 250.00 },
];

const ProductList = () => {
  const { dispatch } = useCart();

  const handleAddToCart = (product) => {
    dispatch({
      type: 'ADD_ITEM',
      payload: { ...product, quantity: 1 }
    });
  };

  return (
    <div style={{ marginTop: '20px' }}>
      <h3>Nuestros Productos</h3>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '20px' }}>
        {products.map(product => (
          <div key={product.id} style={{ border: '1px solid #ddd', padding: '15px', borderRadius: '8px' }}>
            <h4>{product.name}</h4>
            <p>Precio: ${product.price.toFixed(2)}</p>
            <button
              onClick={() => handleAddToCart(product)}
              style={{ padding: '8px 15px', backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}
            >
              Añadir al Carrito
            </button>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ProductList;

6.3. Cart.js (Componente para ver, actualizar y eliminar ítems del carrito)

Crea src/components/Cart.js:

// src/components/Cart.js
import React from 'react';
import { useCart } from '../context/CartContext';

const Cart = () => {
  const { state, dispatch } = useCart();

  const handleRemoveItem = (id) => {
    dispatch({
      type: 'REMOVE_ITEM',
      payload: id
    });
  };

  const handleUpdateQuantity = (id, newQuantity) => {
    if (newQuantity < 1) return; // No permitir cantidades negativas o cero desde aquí
    dispatch({
      type: 'UPDATE_QUANTITY',
      payload: { id, quantity: newQuantity }
    });
  };

  const handleClearCart = () => {
    dispatch({
      type: 'CLEAR_CART'
    });
  };

  return (
    <div style={{ marginTop: '30px', borderTop: '1px solid #eee', paddingTop: '20px' }}>
      <h3>Tu Carrito de Compras</h3>
      {state.items.length === 0 ? (
        <p>El carrito está vacío.</p>
      ) : (
        <div>
          {state.items.map(item => (
            <div key={item.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px dashed #eee', padding: '10px 0' }}>
              <span>{item.name} (${item.price.toFixed(2)})</span>
              <div>
                <button onClick={() => handleUpdateQuantity(item.id, item.quantity - 1)} style={{ marginRight: '5px', padding: '5px 10px' }}>-</button>
                <span>{item.quantity}</span>
                <button onClick={() => handleUpdateQuantity(item.id, item.quantity + 1)} style={{ marginLeft: '5px', padding: '5px 10px' }}>+</button>
                <button
                  onClick={() => handleRemoveItem(item.id)}
                  style={{ marginLeft: '15px', padding: '5px 10px', backgroundColor: '#dc3545', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}
                >
                  X
                </button>
              </div>
            </div>
          ))}
          <div style={{ marginTop: '15px', fontWeight: 'bold' }}>
            <p>Total de ítems: {state.totalItems}</p>
            <p>Monto Total: ${state.totalAmount.toFixed(2)}</p>
          </div>
          <button
            onClick={handleClearCart}
            style={{ marginTop: '15px', padding: '10px 20px', backgroundColor: '#6c757d', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}
          >
            Vaciar Carrito
          </button>
        </div>
      )}
    </div>
  );
};

export default Cart;

Crea también la carpeta src/components.

▶️ Paso 7: Ejecutar la Aplicación

¡Es hora de ver nuestra aplicación en acción!

En tu terminal, ejecuta:

npm start
# o
yarn start

Esto abrirá tu aplicación en http://localhost:3000 (o un puerto similar). Podrás añadir productos, ver el total en el header y manipular el carrito.

📈 Beneficios y Cuándo Usar Context API + useReducer

Esta combinación ofrece varios beneficios:

• Rendimiento: React optimiza las re-renderizaciones. Solo los componentes que consumen el contexto se re-renderizan cuando el valor del contexto cambia.
• Simplicidad: Para muchas aplicaciones, es una alternativa más ligera a Redux, ya que no requiere bibliotecas adicionales ni una gran cantidad de boilerplate.
• Mantenibilidad: El uso de useReducer centraliza la lógica de actualización del estado en un único lugar (el reducer), lo que facilita la comprensión y depuración.
• Escalabilidad: Permite organizar estados complejos y acciones de manera estructurada, lo que es crucial a medida que la aplicación crece.

Cuándo podría no ser la mejor opción:

• Aplicaciones muy pequeñas: Si solo tienes 2-3 componentes compartiendo un estado sencillo, las props o useState con levantamiento de estado (lifting state up) son suficientes.
• Aplicaciones enormes con rendimiento crítico: Para aplicaciones con un estado global extremadamente grande y cambios de estado muy frecuentes que impactan en muchas partes de la UI, Redux (o librerías similares) con sus propias optimizaciones (selector memoization) aún podrían tener una ventaja en términos de rendimiento.

// App.js con múltiples proveedores
<AuthProvider>
  <ThemeProivder>
    <CartProvider>
      <AppContent />
    </CartProvider>
  </ThemeProivder>
</AuthProvider>

✅ Conclusión

Has aprendido a construir un sistema de gestión del estado global en React utilizando la Context API y el hook useReducer. Esta potente combinación te permite manejar el estado complejo de tu aplicación de forma organizada y eficiente, sin necesidad de bibliotecas externas complejas. Es una excelente opción para construir aplicaciones React escalables y mantenibles.

¡Experimenta con tu nueva aplicación, añade más funcionalidades al carrito o crea otros contextos para diferentes partes de tu estado global!