"Implementación de Context en React para Gestión de Estado"

Curso de Webpack con Express.js, React.js y TypeScript

Contenido del curso

Introducción

Webpack en el Backend

Webpack en el Frontend

Despliegue

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:51

"Implementación de Context en React para Gestión de Estado"

Curso de Webpack con Express.js, React.js y TypeScript

Clase 10 de 22

Clase 10 / 22

Recursos

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.

Introducción

Migración y Configuración Avanzada de Webpack 5 con TypeScript

Configuración y Optimización de Proyectos con Webpack y TypeScript

Webpack en el Backend

Configuración Básica de Express y Webpack para Proyectos Node.js

Configuración de Webpack para Proyectos con Express

Migración de Aplicaciones Node.js a TypeScript paso a paso

Configuración de API Rest con TypeScript y JSON para Platzi Store

Webpack en el Frontend

Migración y Optimización de Proyectos con Webpack 5

Configuración de Webpack para Desarrollo y Producción en React

Creación de Hooks para Consumo de APIs en React con Axios

"Implementación de Context en React para Gestión de Estado"

Configuración de Alias en Webpack para Proyectos JavaScript

Optimización de Imágenes y Uso de CDN en Proyectos Web

Optimización de Imágenes PNG con Image Minimiser Webpack Plugin

Configuración de TypeScript en React con Webpack

Configuración de Hot Reload en Webpack con React

División de Código con Lazy Loading en React

División de Código con Webpack y Micro Frontend en React

Configuración Avanzada de Webpack para Separar Código y Dependencias

Despliegue

Despliegue de Aplicaciones Web con Netlify y GitHub

Despliegue de API en Heroku con Express y TypeScript

Conexión de un Dominio Personalizado a Netlify y Cloudflare

Migración de Wetpack y Optimización para Producción

"Implementación de Context en React para Gestión de Estado"

Progreso del curso

Introducción

Webpack en el Backend

Webpack en el Frontend

Despliegue

Recursos

Recursos