No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Contexto global de la aplicación

9/31
Recursos

Aportes 58

Preguntas 6

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Por que usaremos un estado global
Para que, cuando nuestro proyecto vaya aumentando su complejidad, no sé vuelva tedioso estar pasando la información que componetes, hermanos, hijos, padres, necesitan entré sí.

También, por que es mas facil debuggear errores teniendo una sola fuente de la verdad en cuanto almacenamiento para nuestra aplicación a la vez que lo hace mas legible y facil de mantener. 😃

Con el context evitamos el “props drilling” ¿Que es? Cuando tenemos que pasar los datos que necesita cada componte por las propiedades,

Componete padre => hijo => nieto => bisnietos.

Con reactContext nos evitamos eso. y directamente llamamos dentro del componente al dato que necesitamos a travez del contexto.

Los tenemos por separados
Componente padre {contexto = dato}
Hijo {contexto = dato}
nieto{contexto = dato}
bisnieto {contexto = dato}

El prop drilling lo definimos como un paso del desarrollo que ocurre cuando necesitamos obtener datos que están en varias capas en el árbol de componentes React, es decir, necesitamos comunicar los componentes padres con sus componentes hijos.
 
El contexto global nos permite evitar el envío de props entre todos estos componentes (prop drilling), teniendolos “centralizados” viviendo en un solo lugar y al cual podemos acceder desde cualquier parte de nuestra aplicación (todo lugar que se encuentre contenido en el wrapper)

Usaremos un estado global ya que es más sencillo comunicar las propiedades y el estado por los componentes.
Como la aplicación no es tan grande, Context es bastante útil en lugar de Redux o useReducer().

De igual manera, considero importante crear un Hook de useContext() para reutilizarlo a lo largo de la aplicación.

En el curso de introducción a react varias cosas no me quedaron claras, varias cosas aparecían y solo se infería que se utilizaban. Como el provider y consumer.

Esas mismas cosas en este curso me quedan más claras, pero eso no implica que el curso de introducción a react no sea bueno, el curso de intro a react básicamente nos quita el miedo a afrontar el entorno y este muestra más claro varios conceptos.

Es como aprender inglés, duolinguo no te enseñara ingles, pero te quita el miedo a afrontar el idioma y hablar con nativos realmente te enseñara como se usa realmente el lenguaje.

Me encanta como estos nuevos cursos se complementan.

Hola compañeros, se que todos estaremos escribiendo lo mismo pero ahi les va por que usamos un contexto global en sencillas palabras.

Básicamente lo usamos para poder tener diferentes estados y usarlos en toda la aplicación, sin la necesidad de volverlos a crear cada vez que necesitemos un estado en particular en cada archivo [index.jsx[.

En resumen, es para no repetir código a lo que yo pude entender, y esto hará que nuestro código sea mas limpio y ordenado

Por si a alguien le interesa les muestro mi implementacion del contexto con typescript.

import { createContext, ReactNode } from "react";

type Props = {
    children:  ReactNode
}

const ShoppingCartContext = createContext<Props | null>(null); 

export const ShoppingCartProvider: React.FC<Props> = ({children}: Props) => {
    return (
        <ShoppingCartContext.Provider value={{ children }}>
            {children}
        </ShoppingCartContext.Provider>
    )
}

export default ShoppingCartProvider;

Por fin una explicación sencilla y didáctica sobre el tema, gracias!

Usamos un estado global porque es la manera más profesional, fácil y escalable de hacer que la información se converse en toda nuestra aplicación.

Para evitar el prop drilling
En proyectos de React, suelo preferir el uso de un estado global, especialmente cuando la aplicación se vuelve más compleja y necesita una gestión centralizada del estado. Al usar un estado global, evitamos la necesidad de pasar datos entre múltiples componentes mediante props, simplificando el código y mejorando la escalabilidad. Además, herramientas como Redux facilitan el manejo de estados asíncronos y aportan estructura al desarrollo, especialmente en proyectos más grandes. En resumen, para situaciones más complejas, me inclino hacia el estado global.

El principal motivo para utilizar React Context para compartir datos globalmente es mantener un estado compartido accesible a lo largo de varios componentes en una aplicación de React, sin necesidad de pasar explícitamente props a través de múltiples niveles de la jerarquía de componentes.

El Estado Global de nuestra aplicacion generado por createContext de React, nos permite acceder a todos los datos que necesita un componente, independiente de todo el resto.
Esto nos permite manejar de manera individual las props que recibe cada componente y asi hacer mas facil la correccion de errores ya que tenemos toda la informacion de la aplicacion reunida en el Context.

para utilizar los valores de los estados en distintos componentes!

Usamos un estado global para que así distintas partes de la aplicación tengan la capacidad de interactuar con la data que viene de la API, para hacer un filter, ejemplo de Electronics, se accede al estado global, se filtran desde allí y se obtiene, para no estar realizando constantes fetchs en los distintos labels de los productos

Eso es lo que pienso 😃

Dando respuesta al quiz... Ya no se usará un *<u>estado local</u>* porque puede complicar la comunicación entre componentes cuando la aplicación crece en complejidad. De lo contrario, se usará un *<u>estado global</u>* porque permite centralizar el manejo del estado en una única fuente de verdad, lo que facilita la compartición de información entre los componentes, hace la aplicación más mantenible, y permite un debugging más sencillo. Esta es la razón por la que frameworks como Redux o el Context API en React son útiles en aplicaciones de gran escala.
La razon principal para utiliar un estado global, es que todos los componentes puedan tener un acceso igual a la misma informacion de estado, en todo momento.
Vamos a utilizar un estado global para permitir colocar en contexto a los demás componentes dentro de nuestra aplicación. Esto nos sirve para modificaciones, etc...
el estado global, todos los componentes pueden acceder a la misma información fácilmente, lo que mejora la consistencia y hace que el código sea más limpio y fácil de depurar
1. ```jsx import { createContext } from "react"; import PropTypes from "prop-types"; const ShoppingCartContext = createContext(); export const ShoppingCartProvider = ({ children }) => { return ( <ShoppingCartContext.Provider>{children}</ShoppingCartContext.Provider> ); }; ShoppingCartProvider.propTypes = { children: PropTypes.node.isRequired, }; ```error children is missing in props validation Esta advertencia se produce porque la `children`propiedad no está definida ni validada explícitamente.
Yo estoy usando Typescript paa el proyecto y así quedo el tipado de mi contexto. `import { ReactNode, createContext } from "react";` `import { Product } from "../models/Product";` `type ShoppingCartContextType = {` ` products: Product[];` `}` `const ShoppingCartContext = createContext<ShoppingCartContextType | null>(null);` `export const ShoppingCartProvider : React.FC<{children: ReactNode}> = ({children}) => {` ` return (` ` <ShoppingCartContext.Provider value={{` ` products: [],` ` }}>` ` {children}` ` </ShoppingCartContext.Provider>` ` );` `}` El *ShoppingCartContextType* representa al objeto que le vamos a pasar luego como *value* a nuestro Provider.
Se utiliza un estado global porque hay elementos como el carrito que interactúan en toda la extensión del proyecto, por tanto a medida que aumenta la complejidad del proyecto es necesario ofrecer elementos útiles en toda la aplicación.
Quiz - Por que se va a dejar de usar Estados Locales y se van a Empezar a usar Estados Globales? * Para manejar datos de la aplicacion compartidos entre varios componentes * Para comunicar a componentes no relacionados
para evitar el props drilling y pasar props de padres a nietos sin intermediarios
![](https://static.platzi.com/media/user_upload/image-3c91e23f-0ab9-460c-8d66-ca92ee036de5.jpg) Alguien echó a perder la api, le pusieron puros no romper please

Me gustan estas clases gráficas donde la profesora se pone a explicar lo más simple y con pizarra los conceptos que aprendemos 😃

La cosa es que yo tengo una carrito de compras que es un contador, es decir cada vez que un usuario agregue un producto o lo quite este carrito va a sumar o restar dependiendo del caso, el asunto es que el puede variar desde el Home si se agrega un articulo, o desde el componente My Orders si el usuario se arrepiente y borra el artículo, es por ello que mi carrito debe convertirse en un estado global porque puede recibir muchos requerimientos de componentes distintos como en este caso que mencioné se usaron los componentes Home y My Orders.

Hola... ahora necesitamos el estado global que lo maneja Context, para que los diferentes componentes puedan comunicarse: Navbar, Card, MyOrder... y que los eventos que sucedan en un pantalla puedan actualizarse en las demas vistas.
Vamos a usar un estado global para evitar un problema de las props drilling, y facilitar la comunicación de estados entre variso componentes
Estamos usando el context para evitar el prop drilling que es cuando los componentes raíz tienen que enviar info hasta las hojas y entre hojas se deben comunicar, haciendo difícil el manejo de la info. Por eso ya todos se comunican a un elemento central.
Me desespera cuando dice"yeiii" 😑
![](https://static.platzi.com/media/user_upload/carbon%20%284%29-5368914a-1a76-431a-a931-aa0f0e8df6c3.jpg)
El estado global nos servirá **cuando** se requiere tener acceso a toda la data, funciones, desde cualquier parte de nuetra web, ahora, no quiere decir que lo usaremos en todos lados, se requerirá, segun el contexto, determinar dónde será necesario implementarlo. En algunos casos necesitarás un contexto local local y en otros Global. **Y porqué usar contexto global en vez de props?** Porque nos ayuda a comunicarnos de forma mas directa, sin requerir el uso de props en todos lo componentes intermedios (Padre-hijo, y sucesores....)

Usar el estado global permite que tengamos un código más prolijo y con una comunicación más eficiente entre componentes, sin necesidad de pasar props. Se evita el prop drilling.

Utilizaremos el estado Global, para compartir desde nuestro contexto todos los estados necesarios para para los componentes que se encuentran en nuestra aplicacion y asi pasar la informacion,
Usaremos un estado global que nos permitira obtener la informacion necesaria en los componentes y evitarno los "props drilling" y hacemos un codigo mas legible y facil de mantener

Siempre se debe usar el estado global para poder comunicar todos los componentes con este unico contexto y de esta manera evitar el Prop Drilling con la comunicacion de padre e hijo y asi sucesivamente

Usamos estado global para tener una única fuente de verdad a donde sin importar que componente sea pueda acceder a la información de forma directa; con esto nos evitamos el uso de props para comunica información entre componentes.

¿Por qué usaremos un estado global?
Creo que utilizaremos un estado global en este proyecto porque siendo un e-commerce va a necesitar que los componentes se comuniquen eficientemente y que a la vez sea escalable en el futuro. También que pueda ser mantenido fácilmente.
.
Una analogía divertida para que se entienda el concepto es la siguiente:

imagina que estás dirigiendo un equipo de construcción. En lugar de que cada trabajador tenga su propio conjunto de herramientas y materiales en cada piso, decides tener un almacén central donde todos pueden obtener lo que necesitan. Esto acelera el proceso de construcción y asegura que todos tengan acceso a las mismas herramientas de manera eficiente

Usamos el estado global para comunicar la información a todos los componentes.

Para tener acceso desde todo los componente a variables y constantes

A como lo entiendo,

el contexto local nos permite detectar las interacciones en un mismo componente y que dicho componente actúe en consecuencia pero el contexto local es invisible para otros componentes.

el contexto global permite que cualquier componente pueda ver las interacciones donde se ha establecido el contexto global.

Y mi analogía sería, el contexto local es todo lo que tienes almacenado en el disco duro de tu computadora y todo lo que haces en ella, el contexto global es como si estuvieras trabajando con muchas personas pero desde google drive!

Básicamente utilizaremos el estado global para facilitar la comunicación entre componentes evitando el prop drilling.

Usamos el Estado Global para tener asceso a nuestro componentes en cualquier parte de la App y asi no caer en la tediosa tarea de estar comunicando proops por doquier y caer en Proops Drilling.

Utilizamos un estado global, ya que necesitamos disponer de los elementos y el contador de productos mientras nos desplazamos a traves de nuestra aplicación, si lo dejamos en local solo las dispondremos en el home o tendríamos que pasarla por props a cada pagina donde la quisieramos tener.

Por qué ya no vamos a utilizar un estado local si no vamos a utilizar un estado global?
Porque necesitamos que todos los componentes compartan información entre ellos y no queden aislados. Además, es una forma de evitar pasar información mediante propiedades entre componentes padres a hijos, debido a que cuando se tiene un gran cantidad de ellos se vuelve tedioso trabajarlos a esto también se le conoce como “props drilling”.

Usaremos un estado global ya que de esa manera, enviaremos la información entre componentes del árbol, y así evitaremos el prop drilling . También hará que nuestro código sea más legible.

La razón es que nos permite comunicar información entre componentes de manera más eficiente y permite hacer más escalable el proyecto. Por otro lado, podríamos usar props, pero ello genera que el proyecto sea más complejo a la hora de comunicar la información entre componentes y a medida que el proyecto crezca se hará más confuso y tedioso.

Se utiliza el Contexto para no tener que estar pasado props entre elementos padre e hijo y solamente queda llamar la propiedad en el componente que se necesita

Necesitamos un estado global para compartir datos entre varios componentes en nuestra aplicación de React. En lugar de pasar los datos manualmente a través de múltiples niveles de componentes como “props”, el estado global permite que los componentes accedan a los datos directamente desde el contexto sin necesidad de pasarlos explícitamente.

Podemos usar un contexto en React para que nuestra API viva alli, y se pueda usar en todas las paginas sin necesidad de hacer varios reaquest (tocaria hacer varios request si nuestra API viviera en lo local). Asi usamos una sola fuente de almacenamiento.

Con estado global el usuario va a poder hacer muchas solicitudes en diferentes componentes de forma de que te manda la información centralizada y va a escuchar todos los componentes de forma dinámica y mas efectiva de manera local es demasiado complicado y no es lo mismo como lo que dice el ejemplo del banco

Respuesta del quiz = Vamos a usar un estado global para poder consumirlo desde distintos componentes

Básicamente, Context provee una forma de pasar datos a través del árbol de componentes sin tener que pasar props manualmente en cada nivel.

Porque usar el estado global?
Nuestro proyecto no solo requiere que tengamos informacion aislada en un estado local en cada componente, sino que compartiremos informacion en los distintos componentes que estamos creando. Ademas de tener una fuente unida de verdad para administrar la informacion a todos los componentes

Un contexto global nos permite acceder desde cualquier parte de nuestra aplicacion

Usaremos un estado global para que todos los componentes estén comunicados entre sí y tengan acceso a todas las props, estados, etc.