useContext en 20 minutos

Summary

Este video explica cómo usar el contexto en React para gestionar el estado global de una aplicación, desafiando la idea de que Redux es la única opción. Se muestra cómo crear un contexto, usar el Provider para compartir datos a través de la jerarquía de componentes y cómo encapsular el estado y las acciones en un 'user provider'. Además, se compara con Redux y se destaca cómo la utilización de hooks y context API puede mejorar el rendimiento y la estructura del código.

Takeaways

• 😀 La biblioteca Redux no es la única opción para gestionar el estado global en aplicaciones React.
• 🔧 React ofrece una herramienta nativa, el Context, que puede ayudar a gestionar estados globales de manera eficiente.
• 🌐 Se aborda cómo usar el Context para compartir información entre componentes de diferentes niveles en una aplicación React.
• 🛠 Se compara el uso de Redux con el Context y se sugiere que combinar el Context con un reducer puede emular la funcionalidad de Redux.
• 📈 Se enfatiza la mejora en rendimiento al usar Context en lugar de Redux, ya que se utilizan herramientas nativas de React.
• 👨‍🏫 Mario Girón, el presentador, explica paso a paso cómo crear y utilizar un Context en una aplicación React.
• 🔑 Se destaca la importancia de mantener un estado global en aplicaciones grandes para compartir información a través de múltiples componentes.
• 🏗 Se muestra cómo crear un Context desde cero y cómo inyectarlo en componentes para compartir datos a lo largo de la aplicación.
• 🔄 Se explica cómo se pueden encapsular las acciones y el estado en un 'provider' para facilitar su uso en diferentes componentes.
• 🔗 Se sugiere la posibilidad de combinar el uso de Context con otras herramientas o técnicas para mejorar aún más la gestión del estado en aplicaciones React.

Q & A

¿Qué herramienta se menciona en el script como alternativa a Redux para gestionar el estado global en aplicaciones React?

El script menciona el contexto (Context) de React como una herramienta alternativa a Redux para gestionar el estado global en aplicaciones.

¿Qué es un 'provider' en el contexto de React y cómo se utiliza?

Un 'provider' en React es un componente que permite pasar un contexto creado a través del árbol de componentes sin necesidad de asignarlo a cada componente manualmente. Se utiliza para inyectar datos o funciones a varios componentes a la vez.

¿Cómo se crea un contexto en React y qué se utiliza para ello?

Se crea un contexto en React utilizando el método `createContext` proporcionado por la librería de React. Esto permite compartir datos a través del árbol de componentes.

¿Qué es la función 'useState' en React y para qué se usa?

La función 'useState' es un hook en React que permite mantener el estado local en componentes funcionales. Se usa para definir un estado inicial y una función que permite actualizar ese estado.

¿Cómo se puede acceder al estado y a las funciones definidas en un contexto creado en React?

Para acceder al estado y a las funciones definidas en un contexto creado en React, se utiliza el hook `useContext` y se le pasa el contexto creado anteriormente.

¿Cuál es la ventaja de usar un contexto en React para compartir datos entre componentes?

La ventaja de usar un contexto en React es que permite compartir datos a lo largo de toda la aplicación sin necesidad de pasar props manualmente a través de cada componente, lo que simplifica el proceso y evita la propagación de props a través de múltiples niveles.

¿Qué es un 'hook' en React y cómo se relaciona con el uso de contextos?

Un 'hook' en React es una función que permite usar estado y otras características de los componentes de clase en componentes funcionales. Se relaciona con el uso de contextos a través de los hooks `useContext` y `useReducer`, que facilitan el acceso y la manipulación del estado global.

¿Cómo se puede encapsular el contexto y las funciones que lo modifican en un solo lugar para su uso en toda la aplicación?

Se puede encapsular el contexto y las funciones que lo modifican creando un 'provider' personalizado que inyecte ambos contextos y las funciones necesarias. Esto se logra exportando los contextos y las funciones desde un archivo centralizado y utilizando un componente que los inyecte en el árbol de componentes.

¿Qué es la función 'useReducer' en React y cómo se compara con el uso de un contexto para gestionar el estado?

La función 'useReducer' es un hook en React que permite usar un reducer para gestionar el estado de una aplicación. Se compara con el uso de un contexto en que ambos permiten gestionar el estado global, pero 'useReducer' es especialmente útil para aplicaciones con estado complejo que requiere más control y lógica de actualización del estado.

¿Cómo se puede mejorar el rendimiento de una aplicación React al usar contextos en lugar de bibliotecas externas como Redux?

El uso de contextos en lugar de bibliotecas externas como Redux puede mejorar el rendimiento de una aplicación React ya que evita la sobrecarga de dependencias adicionales y permite utilizar las herramientas nativas de React, lo que puede resultar en una aplicación más rápida y eficiente.

Outlines

00:00

🌐 Introducción al Context API en React

El vídeo comienza explicando que, aunque Redux es una librería popular para gestionar el estado global en aplicaciones React, no es la única opción. Se presenta el Context API como una herramienta nativa de React que puede ayudar a gestionar un estado más o menos global. Se enfatiza la importancia de compartir información entre componentes, especialmente en aplicaciones grandes con múltiples niveles de componentes. Se menciona que el Context API puede ser combinado con 'useReducer' para emular la funcionalidad de Redux, pero con mejor rendimiento. Se habla de la creación de un 'contexto' para compartir información a lo largo de toda la aplicación, empezando por una aplicación simple y explicando cómo se puede escalar utilizando 'createContext'.

05:00

🔄 Cómo utilizar el Context API para gestionar el estado

El vídeo sigue explicando cómo se puede utilizar el Context API para crear un estado global y cómo se puede acceder a él desde componentes hijos. Se muestra cómo crear un contexto con 'createContext' y cómo proveer ese contexto a otros componentes utilizando el 'Provider' componente. Se detalla el proceso de pasar un objeto de estado y una función para cambiar ese estado a través del contexto. Se menciona la creación de una función 'cambiarLogin' que cambia el estado del usuario y cómo se puede llamar a esta función para simular un login o logout.

10:01

📚 Creación de un Provider para encapsular el contexto

El vídeo explica cómo se puede encapsular el contexto y las funciones relacionadas con el estado del usuario dentro de un componente funcional llamado 'userProvider'. Se detalla cómo se pueden crear dos contextos, uno para el usuario y otro para la función que cambia el usuario. Se muestra cómo se pueden pasar estos contextos a otros componentes utilizando el 'Provider' y cómo se pueden aislar estos contextos para facilitar su uso en diferentes partes de la aplicación.

15:03

🔧 Mejores prácticas con custom hooks y providers

El vídeo avanza explicando cómo se pueden crear custom hooks para acceder al contexto y a las funciones de cambio de usuario, facilitando así su uso en cualquier componente. Se muestra cómo se pueden exportar estas funciones y cómo se pueden usar en componentes hijos para acceder al contexto y realizar cambios. Se resalta la importancia de encapsular la lógica de estado y acciones en un solo lugar para mantener el código limpio y organizado.

20:05

🎬 Conclusión y recursos adicionales

Para finalizar, el vídeo ofrece el código fuente en el repositorio para que los espectadores puedan seguir y modificar el ejemplo. Se invita a los espectadores a dejar sus preguntas en los comentarios y se recuerda la importancia de suscribirse, dar like y compartir el vídeo para ayudar al canal. Se anuncia que en el próximo vídeo se seguirá explicando temas relacionados.

Keywords

💡React

React es una biblioteca de JavaScript para construir interfaces de usuario, desarrollada y mantenida por Facebook. En el vídeo, se menciona que se va a hablar de cómo gestionar el estado global en aplicaciones de React, lo cual es un aspecto clave en el desarrollo de aplicaciones web modernas.

💡Redux

Redux es una librería de JavaScript que permite gestionar el estado de aplicaciones de manera predecible. En el vídeo, Redux se menciona para contrastar con el uso del contexto en React, destacando que no es la única opción para gestionar el estado global.

💡Contexto

El contexto en React es una característica que permite compartir datos a través de la jerarquía de componentes sin tener que pasar props manualmente a cada nivel. En el vídeo, se aborda cómo usar el contexto para gestionar un estado más o menos global dentro de la aplicación.

💡Estado Global

El estado global hace referencia a los datos que son accesibles desde cualquier componente en una aplicación. El vídeo trata sobre cómo usar el contexto de React para gestionar este tipo de estado, permitiendo así la comunicación entre componentes.

💡Provider

Provider es un componente de orden superior en React que permite pasar datos a través de la jerarquía de componentes. En el vídeo, se explica cómo usar el Provider para inyectar datos en el contexto y así hacerlos accesibles para los componentes.

💡Componentes Funcionales

Los componentes funcionales son una forma de crear componentes en React que se centran en la función de renderizado puro. En el vídeo se menciona que el uso del contexto puede ser más flexible con componentes funcionales.

💡Hooks

Los hooks son una característica introducida en React 16.8 que permite usar estado y otras características de los componentes de clase en componentes funcionales. En el vídeo, se habla de cómo usar hooks personalizados para encapsular el acceso al contexto.

💡createContext

createContext es una función en React que se usa para crear un nuevo contexto. En el vídeo, se menciona cómo usar createContext para crear un contexto que luego se puede consumir en otros componentes.

💡useContext

useContext es un hook en React que permite consumir un contexto en un componente funcional. En el vídeo, se explica cómo usar useContext para acceder al estado global desde un componente funcional.

💡Encapsulamiento

El encapsulamiento es un principio de programación que permite ocultar la implementación interna de un objeto o componente. En el vídeo, se habla de cómo encapsular el acceso al contexto y las acciones de cambio dentro de un 'user provider' para mantener un código limpio y organizado.

💡Rendimiento

El rendimiento se refiere a la eficiencia y velocidad a la que se ejecuta un programa o aplicación. En el vídeo, se sugiere que usar el contexto de React en lugar de Redux puede mejorar el rendimiento de la aplicación debido al uso de herramientas nativas de React.

Highlights

Redux no es la única librería para gestionar el estado global de aplicaciones en React.

React tiene una herramienta muy potente llamada Contexto para gestionar estados globales.

Se puede utilizar Contexto junto con el hook 'useReducer' para emular la funcionalidad de Redux.

El rendimiento de la aplicación mejora al usar Contexto en lugar de Redux ya que se utilizan herramientas nativas de React.

Se centra en la creación de un estado más o menos global para compartir información entre componentes.

Se explica cómo pasar información de padres a hijos a través de varias generaciones de componentes.

Se detalla cómo mantener un estado global a lo largo de toda la aplicación.

Se describe el proceso de creación de un contexto desde cero en una aplicación React.

Se menciona la importancia de no dejar el 'Provider' sin cerrar para mantener la jerarquía correcta.

Se explica cómo llamar a la función 'Provider' para pasar datos a cualquier componente dentro de la jerarquía.

Se muestra cómo crear una función para cambiar el estado del usuario y simular un login.

Se detalla cómo acceder al contexto en componentes funcionales usando el hook 'useContext'.

Se explica cómo se puede acceder al estado del usuario desde un componente hijo utilizando el contexto.

Se describe cómo se puede encapsular el contexto y las acciones en un 'Provider' para facilitar su uso en la aplicación.

Se sugiere la creación de un archivo 'userProvider' para encapsular el contexto y las acciones relacionadas con el usuario.

Se explica cómo se pueden generar dos contextos en el 'userProvider' y cómo inyectarlos en los componentes hijos.

Se detalla cómo se pueden crear funciones personalizadas para acceder al contexto del usuario y a la función de cambio de login.

Se muestra cómo se pueden utilizar estos hooks personalizados en lugar de llamar directamente a los contextos.

Se describe cómo se puede hacer la transición de usar directamente los contextos a utilizar los hooks personalizados en los componentes hijos.

Se explica cómo se puede generar un código más elegante y flexible al encapsular el contexto y las acciones en un 'Provider'.

Se sugiere la posibilidad de combinar el uso de Contexto con 'useReducer' para obtener una funcionalidad similar a Redux pero con mejor rendimiento.

Se invita a los espectadores a dejar sus preguntas en los comentarios y a suscribirse al canal.

Transcripts

a ti también te han comido la cabeza con

qué redux es la única librería que

tenemos disponible para poder gestionar

el estado global de nuestras

aplicaciones en principio no es verdad y

además en react tenemos una herramienta

muy muy chula que nos lo va a demostrar

hoy vamos a hablar del contexto vamos a

ver cómo nos puede ayudar para gestionar

un estado más o menos global dentro de

nuestra aplicación y vamos a ver cómo

podemos utilizarlo y cómo podemos darle

forma para que quede elegante al

comunicarnos entre nuestros componentes

soy mario girón bienvenido a garage code

pits

y bueno

y bueno

quizá la comparación entre una librería

como redux y el just contexto el hub

context que vamos a analizar en el vídeo

de hoy sobre react quizás es un poco

presuntuoso pero bueno lo podríamos

aproximar y además si este jugo lo

combinamos con el jugo reducer podemos

conseguir algo muy parecido a lo que

conseguimos con libre redux y además

utilizando herramientas nativas del

propio react por lo tanto el rendimiento

mejora y nuestra aplicación irá

muchísimo mejor nos vamos a centrar

justo en la creación de un ámbito nos

vamos a centrar en la creación en este

caso de un estado un poquito más global

para que podamos pasar información de

unos componentes a otros también es algo

muy muy importante cuando trabajamos ya

con una aplicación completa en la que

necesitamos de padres a hijos pasar

información pero ya no de padres a hijos

que estén en contacto sino de padres a

hijos que tengan muchas generaciones

deportes de por medio que sean abuelo

que sean nietos etcétera etcétera es

decir mantener un estado global o unos

datos que podamos compartir a lo largo

de toda nuestra aplicación y lo vamos a

ver a través de este hub porque además

es una de las novedades que nos trajeron

la aparición de los hubs hace ya tiempo

en riad y que ahora podemos implementar

en nuestros componentes funcionales

bueno como lo vamos a hacer vamos a

partir de una aplicación muy simple en

la que tenemos una jerarquía muy fácil y

está dentro del componente app

simplemente he colocado un componente

hijo como es este caso y dentro de este

componente hijo es donde vamos a recibir

todos aquellos datos que nosotros

generemos desde el contexto principal o

que generemos desde el estado principal

de nuestra aplicación y la idea es ver

cómo podemos interactuar con todos estos

personajes dentro de este ecosistema que

vamos a generar ahora mismo entonces lo

primero que hay que hacer efectivamente

es pues dentro del app js luego esto lo

orden haremos un poquito más dentro de

app vamos a crear un pequeño estado

vamos a crear un pequeño contexto que

luego podremos pasar a través del resto

de componentes para ello que necesitamos

bueno pues primero necesito importarme

la librería de react entera

lo importamos arriba para poder

utilizarlo y luego lo que vamos a

utilizar es el método create context

este método ya existía es un método que

ya teníamos disponible con los

componentes de clase lo que pasa es que

ahora podemos utilizarlo con un hub

dentro de los componentes funcionales

nos da mucha más flexibilidad a la hora

de crear componentes pues con el resto

de juegos y hacerlo un poquito más

liviano y no con tanta parafernalia como

implica la creación de una clase

constructor todas estas cosas creamos el

hub le llamara y usher con text por

ejemplo porque lo que vamos a simular es

el guardar un usuario y ver cómo podemos

hacer un login y un uno login pero de

una forma sencilla y lo que sí que voy a

hacer es exportarlo para luego poder

utilizarlo desde cualquier otro sitio

sin ningún tipo de problema esa variable

usuario la vamos a guardar en nuestro

componente app por lo tanto lo que vamos

a hacer es traernos también de la

librería de react el news state

este juzga al final lo que no está

haciendo es guardarnos cierto estado

dentro de nuestras aplicaciones por lo

tanto equipo de guardar por ejemplo un

usuario y una función que me permita

modificar dicho usuario lo guardamos a

través de una llamada al yush state y

almacenamos pues un objeto con los datos

que necesitemos en este caso vamos a

inicializar lo vacío para que empiece

nulo ya tenemos el usuario generado y

además la posibilidad de cambiar ese

usuario bien cómo somos capaces nosotros

aquí de poder pasar la información a

través de los diferentes componentes y

que esto sea accesible desde cualquier

punto bueno pues la idea es cómo vamos a

ser capaces nosotros ahora de enviar la

información a través del resto de

componentes bueno pues ya que tenemos

este loser con text lo podemos utilizar

como si fuera un componente generamos

user context etiqueta de apertura y

cierre cuidado que no se nos quede ahí

porque si no no estaríamos generando una

jerarquía correcta y en este caso fijaos

que lo que vamos a hacer es envolver el

resto de componentes dentro de nuestra

aplicación es decir estoy poniendo un

componente por encima para que el resto

de componentes internamente fluyan y

cojan los datos que tenemos en este

contexto lo que sí hay que hacer es

llamar a la función específica provider

porque lo que estamos haciendo aquí es

oye te voy a pasar ciertos datos esos

datos van a estar disponibles dentro de

cualquier componente que esté dentro de

esa jerarquía y esto es importante

definir está esta jerarquía en sí y

definir las longitudes y los componentes

de apertura y cierre para saber hasta

dónde van a poder llegar nuestros datos

bien en este provider lo que sí que le

podemos pasar es un valor este valor

podría ser cualquier cosa podría ser una

función podría ser lo que sea nosotros

lo que le vamos a pasar es el usuario

bueno pues vamos a pasar el propio

usuario y lo que estamos logrando es

cualquier componente que se encuentre

dentro de esta jerarquía que se

encuentre internamente dentro de esta

jerarquía va a poder acceder a ese

usuario a los valores que estén

guardados en ese usuario bueno para

hacerlo un poquito más interesante vamos

a hacer una función que sea por ejemplo

cambiar login o algo así vamos a

llamarlo cambiar login

creamos una pequeña función la activamos

con un con un botoncito por ejemplo el

cambio login si el usuario existe lo que

va a hacer es ponerlo a nulo así que

llamaremos a la función set ya ser y lo

pondremos a nulo simplemente si el

objeto ya existe lo vamos a poner a nulo

sí no volvamos a poner de ciertos datos

por ejemplo hacemos set y usher y le

damos ciertos datos por le vamos a poner

un name vamos a poner un name y le vamos

a poner pues un email por ejemplo

pues este

mail puntocom entonces lo que estamos

haciendo es un simple método que ahora

voy a activar pues con un botón que por

ejemplo colocar aquí arriba

este botón

button este botón o se llama le cambian

login lo que va a hacer es simplemente

activar esa función para ir cambiando el

usuario para simular que ese usuario se

lo vea y se des lo vea simplemente para

ver cómo luego esos datos se traducen a

la hora de pasárselo al componente hijo

llamamos a su evento un clic y aquí

llamamos a la función que le hemos

llamado cambia login

por lo tanto cuando ejecutemos esto el

caso es que cuando nosotros pulsamos el

botón se supone que este valor del

usuario va a cambiar pasará de un objeto

nulo a un objeto con datos e

internamente el contexto será el

encargado de pasar esa información a

través de cualquier hijo de cualquier

componente que tengamos dentro de esta

jerarquía por lo tanto el caso aprobar

en esta formación sería si dentro del

hijo podemos acceder realmente a ese

contexto vamos a probarlo lo que tenemos

que hacer es dentro del hijo consumir el

contexto y esta es la parte importante

cuando nosotros trabajábamos con

componentes de clase lo que teníamos era

esto mismo pero con la propiedad

consumer es decir ponemos una jerarquía

con un componente y ahí con el consumer

nos traíamos el dato que hacemos ahora

dentro de nuestros componentes hijo

bueno pues me voy a mover al componente

que he llamado hijo y lo que tenemos que

hacer aquí primero es importar el you

ser context el contexto que hemos

generado en app por lo tanto importamos

y user contexto el propio contexto

este esta app ese ahí lo tenemos todavía

no lo estamos usando y ahora tenemos que

recuperar la información en los

componentes funcionales se nos ha puesto

la cosa muy muy sencilla porque

realmente solo tenemos que generar un

objeto por ejemplo yo ser y decirle

quiero recuperar información de este

contexto y para ello tenemos los

contexto vale es context que tenemos que

importar de la librería de rayak vale

normalmente visual studio y todas las

herramientas nos devuelven o nos

permiten hacer este tipo de

importaciones automáticas si nos sale

siempre tengamos en cuenta que el just

context que es el interesante en nuestro

caso pero estamos importando de la

librería de rayak importamos yus context

y le decimos simplemente que el contexto

es el que vamos a leer y un ser context

aquí lo tenemos con esto en principio ya

tendríamos el componente cargado ya

tendríamos el valor cargado del usuario

simplemente vamos a echarle un vistazo a

ver si realmente nos devuelve el usuario

vamos a hacer una comprobación voy a

poner el usuario voy a ver con un

pequeño condicional si de verdad tiene

valores o no y cuando tenga valores

mostramos simplemente el nombre así que

con un condicional simple como éste lo

que vamos a hacer es que si existe en

este caso pues mostramos un párrafo en

el que vamos a ver pues hola y aquí

ponemos user punto net con esto ya

montado estamos viendo que de esta

manera tan sencilla yo puedo acceder a

un contexto que está situado en otro

componente que se está modificando en

otro componente y con un simple hub con

una llamada a un método muy muy fácil

estoy recogiendo esa información y me lo

estoy trayendo a este componente

evitamos el tener que estar pasando a

través de las próx estas variables o

estas propiedades y las estamos

recuperando de una manera muy muy

sencilla para luego poder utilizarlo

cualquier modificación que se haga sobre

el objeto y usher se tendría que ver

reflejada dentro de este componente hijo

vamos a arrancar la aplicación y lo

probamos aquí tenemos la aplicación

levantada muy muy simple porque está

mostrando la interfaz de app js con el

botón y la interfaz del hijo pues con

éste h2 que hemos generado aquí cuando

yo le da al botón lo que va a pasar es

que va a cambiar ese contexto y como

vemos aparecerá el valor del usuario

porque le hemos dicho aquí en esta línea

que cuando tengamos valor en el uso

mostremos ese pequeño párrafo mostremos

esa pequeña interfaz bueno esto es muy

muy interesante porque nosotros podemos

pasar cualquier información de un sitio

a otro sin necesidad de tener que estar

pasándolo a través de las próx o

haciendo cualquier floritura de las que

estamos acostumbrados

y todo esto cobra especial importancia

si lo llevamos a un componente

totalmente aparte si aislamos los

contextos en un componente y simplemente

lo utilizamos pues como una herramienta

extra esto lo vamos a llamar un provider

además vamos a hacer una serie de

funciones que nos permitan pasar tanto

el usuario como la acción que cambia el

usuario y lo pone a nulo o no a nulo y

ya veremos que esto nos va a generar un

código súper elegante además muy fácil

de utilizar voy a generar un pequeño

fichero que voy a llamar user provider

llamar aquí user

provider punto js lo podríamos colocar

como una carpeta providers o algo de

este estilo en este user provider lo que

vamos a tener simplemente va a ser una

función normal y corriente que voy a

exportar export

función

y usher provider

ahí tenemos la función va a ser un

componente funcional normal y corriente

lo que pasa es que va a tener pues una

serie de cosas extra vamos a retornar el

código js equis que ahora colocaremos en

el que vamos a inyectar esos contextos

que nosotros vamos a generar aquí arriba

vamos a generar dos contextos la idea es

que estos contextos ahora mismo se

queden aquí englobados y encapsulados

que nos salgan por ahí por nuestra

aplicación y tengamos que andar

exportando el primero va a ser el juz el

context que va a guardar información

sobre el usuario en este caso sobre la

habilidad de react esto no sobre la

liberalidad de react vale si no se

importa ahí está se ha importado

automáticamente llamamos a la función

create context luego le pasaremos

información y luego le pasaremos datos

para hacer esto un poquito más grande y

también vamos a crear un pequeño

contexto context y usher

voy a poner user dog el context haciendo

referencia a que vamos a crear aquí

cierta información para luego poder

hacer la modificación de existe el

usuario no existe el usuario y lo mismo

voy a crear otro pequeño contexto

create context ya tenemos los dos

contextos generados ahora lo importante

es como yo dentro de este componente soy

capaz de pasarle este contexto al resto

de componentes con los cuales voy a

interactuar bueno pues simplemente lo

primero vamos a darle valor a los dos a

los dos contextos para el primero

necesitamos ius state por lo tanto

importamos ius state lo primero y vamos

a generar aquí el usuario lo vamos a

sacar luego de app set y usher lo mismo

y uso state y lo generamos con valor

inicial nulo y también la función cambia

login la voy a traer de app js para no

estar picando otra vez la misma función

función cambia login

la cogemos de app js y la traemos al

provider repito que la idea es un poco

aislar estos estos contextos para luego

poder pasarse los a los diferentes

componentes sin necesidad de tener

problemas de estar exportando importando

etcétera como podemos hacer esto bueno

pues es muy sencillo nosotros la tenemos

que inyectar los providers a todos los

componentes hijo de este componente como

lo hacemos pues usamos el primer

contexto

y usher context llamamos 'la provider y

como valor le vamos a pasar el you ser

como estábamos haciendo pero también

internamente vamos a llamar al otro

contexto

vamos a llamar a ser todo el context

vale vamos a llamar a su propiedad

provider y como value en este caso le

vamos a pasar la función cambia lo que

cambia

login podemos hacerlo igualmente es

decir lo que estamos logrando aquí es

además de inyectar el usuario también

vamos a inyectar como un contexto aparte

la función cambia login y todo esto va a

ser inyectado a todos los componentes o

elementos hijo de este componente your

self provider que nosotros estamos

generando mal y esto es muy importante

porque nosotros vamos a conseguir que a

todos esos componentes que se encuentren

dentro de este loser provider le vamos a

poder pasar pues estos dos contextos el

del usuario y la función para poder

modificarlo entonces ahora simplemente

en app js tenemos que hacer algunos

cambios todavía pero en app js voy a

eliminar esto que ya lo he conseguido

aislar ya no hace falta que lo inyecte

aquí

este contexto ya no hace falta que lo

genere aquí ni que los portes porque lo

estoy encapsulando dentro del provider y

lo que sí que voy a hacer es cambiar

este provider por el you ser provider

que hemos generado una llamada a nuestro

componente y user provider que colocamos

ahí y colocamos aquí y lo que

comentábamos antes todos los hijos

contenidos dentro de este loser provider

van a ser los que van a recibir la

información de los contextos que estamos

generando

tenemos que arreglar evidentemente las

exportaciones porque en el componente

hijo estamos intentando acceder a algo

que hemos quitado de app js lo

importante de esto y lo interesante es

que en nuestro provider que ya lo

tenemos preparado para inyectar en los

diferentes contextos a los diferentes

componentes hijo como nosotros accedemos

externamente a estos contextos una

acción buena sería bueno podemos

exportar los males los dejo exportados y

los importó como he hecho antes pero

claro hablando un poco de encapsulación

y de que nos salgan de este fichero y

user provider queda un poco feo que

podemos hacer bueno pues podemos crear

dos pequeños hubs muy muy sencillos de

utilizar lo primero que voy a hacer es

traerme aquí es context porque lo vamos

a utilizar recordemos que hemos hablado

de yoox context nuestro protagonista

durante este vídeo y hemos dicho que

éste con este hub lo que nos permitía

era acceder a un contexto que tuviésemos

dentro de nuestra aplicación sacamos los

datos y podíamos trabajar con ellos pero

pues lo que voy a hacer es hacer aquí

las llamadas desde houston tex para que

desde fuera desde el componente hijo no

tenga que hacer esas llamadas vamos a

generar dos funciones export voy a crear

una función por ejemplo si la creó con

la palabra ius delante riac ya entiende

que esto va a ser un look por lo tanto

luego podría utilizarlo en mis

componentes funcionales y lo voy a

llamar news y usher context es decir una

función en la que internamente ya voy a

retornar esa llamada context que

necesitará mi componente hijo para

traerse todos los valores de este

contexto que hemos generado aquí con el

valor del usuario por lo tanto aquí le

pasaré el juz el context lo mismo vamos

a hacer para el otro contexto una

función

las pongo exportables para luego poder

traer medias y poder utilizarlas una

función

user toggle contex por ejemplo con texto

y dentro de esta función llamamos otra

vez a los contextos por lo tanto

quitamos esta llamada del componente

hijo lo encapsula vamos aquí y

facilitamos mucho el trabajo y aquí

pasamos el giuseppe dog el context en

cualquier componente donde yo ahora

utilice estos dos hubs voy a tener la

posibilidad de traerme ese usuario y por

lo tanto poder trabajar con él vamos a

probarlo voy a ir al componente hijo

vamos a quitar cosas como por ejemplo la

importación de liu ser con text tampoco

necesitamos el juz context porque ahora

lo que vamos a hacer es trabajar con

nuestros propios hooks es decir vamos a

traernos el hub

news user contexto este de aquí y el

otro también news y usar todo el context

esto aquí abajo lo quitamos

de mi componente yo ser provider me

estoy trayendo mis propios looks vale

mis propios books lo pruebo aquí en vez

de llamar eyeos context lo que tengo que

hacer es llamar a la función news y

usher context ya está esta función

internamente evidentemente que lo que

está haciendo es ejecutar el juz context

por lo tanto me devolverá el valor y

aquí tendré la opción de acceder al

usuario y a cualquiera de sus datos lo

mismo va a pasar con el botón en este

caso el botón lo teníamos en app punto j

s vamos a quitarlo de aquí lo voy a

mover de aquí y lo voy a poner en el

hijo vamos a poner en el hijo tal que

por ejemplo aquí el botón la función

cambia login no existe pero la vamos a

recuperar

cambia login

va a ser igual y utilizo el otro hook

que acabo de crear y de esta manera ya

me estoy trayendo la información de la

función cambia login que es justo la que

modifica esta esta acción en concreto

que no se nos olvide en el componente

yüksel provider para poder acceder a los

datos evidentemente y aquí para poder

acceder a estos children nosotros lo

tenemos que sacar dentro del giuseppe

provider en la definición de la función

las probé solo me quedo con children o

si lo queremos hacer de una manera

digamos un poco más tradicional aquí me

traigo las próx y abajo accedo a props

punto chile nada más de una manera o la

otra y de esta manera he conseguido que

en el componente hijo ya tengamos el

cambia login y que podamos hacer

exactamente lo mismo pero es más es que

este user provider que acabamos de

generar es genérico para toda nuestra

aplicación y encapsula la información

tanto del contexto del usuario como del

contexto de la función que nos permite

cambiar ese usuario y de esta manera

podríamos ampliarlo muchísimo más porque

con estos dos juegos con estas dos

funciones personalizadas que nos hemos

hecho

de los componentes donde yo lo fuese a

utilizar podría estar haciendo estos

cambios y podría estar haciendo acceso o

podría estar accediendo a este contexto

en concreto esto nos demuestra un código

mucho más elegante nos genera un código

mucho más flexible con el cual nosotros

podemos seguir creciendo y además no nos

tenemos que estar exportando tantas

cosas y las acciones como decía antes

sobre context las dejamos encapsuladas

en este objeto y user provider mucho más

cómodo para nosotros si esto lo

combinaremos con otros como jules

reducer por ejemplo podríamos hacer algo

muy parecido a lo que conseguimos con

redux que fue nuestro principal objetivo

al principio y además sería pues eso muy

muy parecido pero con componentes

propios de react por lo tanto el

rendimiento de nuestra aplicación sería

mucho más rápido porque no estaremos

utilizando librerías externas bien bueno

si te ha gustado yo te dejo el código en

la parte de abajo en el repositorio como

siempre para que puedas seguirlo y para

que puedas modificarlo y para que puedas

trabajar sobre él

cualquier pregunta que tengas nos lo

puedes dejar en la caja de comentarios

estaremos encantadísimos de responderte

la y no te olvides de suscribirte darle

al like y todo eso porque hombre nos vas

a ayudar bastante y nada más nos vemos

en el próximo vídeo que vaya bien hasta

luego