Cuando un proyecto es pequeño y no requiere un estado global complejo, React Context se convierte en una alternativa ligera y eficiente frente a Redux. Aquí se muestra cómo crear un context, proveerlo a toda la aplicación y consumirlo en un componente para mostrar productos traídos desde una API.
¿Cómo se crea un context en React desde cero?
El primer paso es organizar el proyecto creando una carpeta llamada context dentro de src. Dentro de esta carpeta se genera un archivo appcontext.js que será el encargado de almacenar y distribuir los datos a toda la aplicación [01:00].
El archivo tiene una estructura sencilla:
javascript
import React from 'react';
const AppContext = React.createContext({});
export default AppContext;
- Se importa React para acceder al método
createContext.
- Se inicializa con un objeto vacío como valor por defecto.
- Se exporta para poder usarlo en otros archivos.
El método createContext es parte de la API de React y permite crear un objeto de contexto. Cuando React renderiza un componente que se suscribe a este contexto, leerá el valor actual del provider más cercano en el árbol de componentes.
¿Cómo se configura el provider en el componente principal?
Una vez creado el context, se importa en el archivo App para envolver toda la aplicación con el provider [02:12]. Esto garantiza que cualquier componente hijo pueda acceder a los datos.
javascript
import AppContext from '../context/appcontext';
Dentro del componente App, se encapsula el contenido con AppContext.Provider y se le pasa un value que contiene el initial state, es decir, los datos que provienen de la API:
javascript
<AppContext.Provider value={initialState}>
<BrowserRouter>
{/* rutas y componentes */}
</BrowserRouter>
</AppContext.Provider>
- El atributo
value es lo que estará disponible para todos los componentes consumidores.
- El provider debe envolver al
BrowserRouter para que todas las rutas tengan acceso al contexto.
- Se eliminan recursos innecesarios como
console.log que solo servían para depuración.
¿Qué se debe eliminar de Redux al migrar a context?
Como el proyecto no maneja un estado muy grande, Redux resulta innecesario. Se deben remover los siguientes elementos [03:30]:
- La importación de
react-redux y el método connect.
- Las funciones
mapStateToProps y mapDispatchToProps.
- Los actions que ya no se utilizarán.
- Las dependencias de
props que venían del store de Redux.
El componente se exporta directamente sin el wrapper de connect, dejando el código mucho más limpio.
¿Cómo se consume el context con useContext en un componente?
En el componente de productos, se reemplaza toda la lógica de Redux por el hook useContext [04:22]. Este hook permite acceder al valor del context más cercano de forma directa.
javascript
import React, { useContext } from 'react';
import AppContext from '../../context/appcontext';
const Products = () => {
const products = useContext(AppContext);
console.log(products);
// renderizar productos
};
- Se importa
useContext desde React.
- Se pasa
AppContext como argumento al hook.
- La constante
products contiene los datos que el provider distribuye desde la API.
Al ejecutar el proyecto con npm run start, se puede verificar en las herramientas de desarrollo del navegador que la API se llama correctamente [05:28]. En la pestaña Network se confirma la petición y en la consola se visualizan los productos al interactuar con el botón de agregar al carrito.
¿Qué ventajas ofrece context sobre Redux en proyectos pequeños?
La integración resulta más directa porque no se requieren reducers, actions ni middleware. El flujo de datos se simplifica a tres pasos:
- Crear el context con
createContext.
- Proveer los datos con el componente
Provider.
- Consumir los datos con el hook
useContext.
Esto reduce considerablemente la cantidad de archivos y configuraciones, manteniendo el proyecto fácil de mantener y entender.
Si quieres profundizar en cómo funciona context junto con hooks, el curso de React Hooks complementa perfectamente este aprendizaje. ¿Ya has migrado algún proyecto de Redux a context? Comparte tu experiencia en los comentarios.
