ContextConsumer en React

Autor: | Última modificación: 26 de septiembre de 2022 | Tiempo de Lectura: 2 minutos
Temas en este post:

Establecer comunicación entre los distintos componentes de nuestro proyecto es fundamental para el flujo y la eficiencia de nuestro código. Para ello, se utiliza el contexto, un atajo que permite comunicar componentes directamente. En este post, te enseñaremos qué es y cómo funciona el ContextConsumer en React, un componente fundamental para el contexto en esta librería.

¿Qué es el ContextConsumer en React?

El ContextConsumer es un consumidor de contenido de contexto, precedente al hook useContext en React. Al igual que este hook, el rol del ContextConsumer es llamar a los datos que se encuentran guardados dentro del provider. Este consumidor es uno de los componentes que se producen automáticamente cuando decidimos crear un contexto en React, al igual que el provider. Entonces, mientras el provider guarda los datos que queremos comunicar, el consumer los llama para poder usarlos en el componente final.

¿Cómo funciona el ContextConsumer en React?

El ContextConsumer en React funciona a partir de una función. Es decir, para usarlo debemos pasarle como children una función. Por ello, es importante abrir una ventana a JavaScript en React, ya que es donde insertaremos este elemento. Recuerda que para hacer esto basta con abrir las llaves { }.

Para el ejemplo siguiente, usaremos el contexto que hemos creado en nuestro post sobre crear un contexto en React, AuthContext.

import {createContext} from ‘react’;

const AuthContext = createContext ( )

Este contexto tiene, a su vez, un provider con un estado de inicio de sesión y dos funciones que lo manejan.

<AuthContextProvider value= {{isLogged, handleLogin, handleLogout}}>

La función que le pasamos al ContextConsumer en React recibe el valor del contexto, definido en la propiedad value del ContextProvider. La función se inserta en el componente al que queremos pasarle el valor y le da los datos que necesita específicamente. Es decir, aunque tu provider tenga tres datos, podemos pasarle solo uno al componente.

Entonces, suponiendo que el componente al que queremos pasarle datos se llama RequireAuth y que necesita solamente el estado isLogged, podemos escribir las siguientes líneas de código:

const ConnectedRequireAuth = (…props) => (

<AuthContextConsumer>

{(value) => <RequireAuth isLogged {value.isLogged} {…props} />}

</AuthContextConsumer>

);

Para pasar el valor de isLogged, también podríamos desestructurar la función de la siguiente manera:

const ConnectedRequireAuth = (…props) => (

<AuthContextConsumer>

{({isLogged}) => <RequireAuth isLogged {isLogged} {…props} />}

</AuthContextConsumer>

);

Nota que para utilizar el ContextConsumer en React hemos decidido crear un componente llamado ConnectedRequireAuth. Esta es una estrategia para mantener todo el código dentro de una sola variable, haciendo posible que llamemos a la conexión directamente desde otro archivo cuando lo exportamos e importamos.

export default ConnectedRequireAuth;

¿Qué sigue?

Ahora que sabes qué es y cómo funciona el ContextConsumer en React, ¡te invitamos a seguir aprendiendo sobre el mundo de la programación para la web! Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde aprenderás todo lo necesario para ser un experto en este tema en pocos meses. ¿A qué esperas para inscribirte? ¡Hazlo ya!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!