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!
