No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Diferencias entre Redux y Context

4/22
Recursos

Aportes 13

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

En mi experiencia personal una vez empece un proyecto de React con la idea de no usar Redux porque queria hacer el bundle mas chico. Asi que use el Context de React y me sucedio que mientras la apicacion crecia era muy complejo de debuggear.
Al final termine usando Redux, solo porque es mas simple de integrar.

Diferencias entre Redux y Context

Cuando un sistema es opaco y no determinista, es d铆f铆cil reproducir errores o agregar nuevas caracter铆
sticas

Context API

  • 驴Qu茅 hace? -> Evita hacer 鈥榩rop drilling鈥 y podemos pasar las props de componentes padres a hijos de f
    orma sencilla.
  • 驴Cu谩ndo usarlo? -> Cuando usemos datos que no cambien mucho en nuestra aplicaci贸n.
  • Se puede usar desde la versi贸n 16.3 de React

Redux vs Context API

  • Depuraci贸n -> Redux tiene un depurador que nos permite viajar en el tiempo. Context API es un poco m谩s
    dif铆cil.
  • Bundle size -> Context API ya viene integrado en React, as铆 que es m谩s ligero.
  • Middlewares -> Redux es muy sencillo con esto.
  • Curva aprendizaje -> Context API es mucho m谩s f谩cil de entender. Redux es un nuevo paradigma.
  • Rendering -> Redux previene renders innecesarios.

al principio usaba props y se creaba el props hell, luego conoc铆 useContext y wow que belleza, ahora con redux espero tener una buena experiencia

Redux para proyectos grandes

useContext soluciona de forma f谩cil esos problemas. espero que terminando el curso entienda la necesidad de usar Redux aun cuando aumenta el peso del bundle

Redux vs. Context API

Depuracion

  • Redux tiene un depurador que nos permite llevar trazabilidad de como se ha ido comportando nuestro estado

  • Context API al no tener un descripci贸n clara y est谩ndar se hace mucho mas complicado de depurar

Bundle size

  • Redux necesita de librer铆as o paquetes externos y requiere ser manualmente integrado para poder ser utilizado

  • Context API ya viene por defecto integrado y no necesita librer铆as externas para ser utilizado

Middlewares

  • Redux tiene una manera muy simple de extender funcionalidades o acciones con los Middlewares

Curva de aprendizaje

  • Redux tiene una curva de aprendizaje mas robusta y al inicio puede ser complicado, se debe saber integrar, aprender un nuevo paradigma y como fluyen los datos con Redux en la aplicaci贸n
  • Context API es f谩cil de aprender y mucho mas ligero

Rendering

  • Redux evita render innecesarios

  • Context API no evita estos render innecesarios, sin embargo, hay t茅cnicas para hacerlo pero se deben hacer manualmente

4.-Diferencias entre Redux y Context


Redux facilita el manejo del estado y lo hace mas predecible y rastreable.


React propone Context API:

  • Proporciona una forma de pasar datos de los componentes padres a los componentes hijos mediante el arbol de componentes sin pasar manualmente por todos los niveles.
  • Est谩 dise帽ado para compartir los datos que pueden ser considerados globales.
  • Podemos usarlo cuando vamos a hacer uso de datos que generalmente no cambiar谩n mucho a lo largo del uso de la app. Como el modo, tema, idioma o usuario autentificado.
  • Se puede usar a partir de la versi贸n 16.3 de React.


Redux vs Context API

  • Depuraci贸n: Con el depurador de Redux podemos 鈥渧iajar en el tiempo鈥 en cambio Context API al tener conectado todo al mismo provider es m谩s dificil de depurar.
  • Bundle Size: Context viene integrado y no necesitas librerias adicionales. Con redux, si, por lo que crece el bundle size de la app.
  • Middlewares: Redux tiene una forma sencilla de extender la funcionabilidad de nuestros triggers o distpachers que nos permite agregar middlewares que atajen la data en cierto punto antes de que llegue a cambiar el estado.
  • Curva de aprendizaje: Context API tiene una curva de aprendizaje m谩s ligera. Con redux tenemos que aprender un nuevo paradigma, entender el ciclo de vida de los datos y aprender sobre la sintaxis.
  • Rendering: Redux nos permite prevenir renders innecesarios.

Saludos a todos,

Aqu铆 pueden ver mis apuntes de esta secci贸n:

https://firstguzman.notion.site/Antes-de-empezar-a990a7cb5a954dff86739e597b81e424

Quedo atento a cualquier sugerencia, duda o comentario. Nos seguimos viendo durante el curso 馃槉馃槉

Honestamente este es uno de los mayores beneficios que veo en redux, me refiero a evitar a los renders innecesarios. Una vez constru铆 una ecommerce con context y s铆 not茅 ese problema de los render, hab铆a un peque帽o cambio y todos los componentes volv铆an a renderizarse, cuando la app es peque帽a casi ni se nota, pero se vuelve una locura a medida que crece

Context API es la soluci贸n que ofrece React para solucionar el problema de props drilling (enviar props de un componente padre hacia los hijos para llegar al quinto nieto). Este problema hace que nuestra aplicaci贸n sea complicada de leer y no hace que sea una aplicaci贸n mantenible.

ContextAPI nos permite pasar los datos desde los componentes padres a los componentes hijos mediante el 谩rbol de componentes evitando el props drilling. Context esta dise帽ado para pasar los datos que puedan ser considerados globales.

Cu谩ndo usarlo?
Cuando vamos a obtener o generar datos que no son muy cambiantes. Ejemplo: tema de la aplicaci贸n (dark o light), lenguaje de la aplicaci贸n, booleano del si el usuario est谩 autenticado, etc. Estos pueden ser compatibles con Context ya que pocas veces cambiar谩n su valor y no requieren de una mayor 鈥榣贸gica鈥.

Ya que sabemos los conceptos de Redux, podemos empezar a hacer las comparaciones:

Redux facilita el manejo del estado y lo hace mas predecible y rastreable.

  • Depuraci贸n:

    • Redux tiene un depurador que nos permite viajar en el tiempo.
    • Context API al tener todo conectado al mismo Provider y sin tener una descripci贸n m谩s clara y estandar de lo que esta cambiando, es un poco m谩s dif铆cil la depuraci贸n
  • Bundle Size:

    • Con Redux crecer谩 un poco m谩s el Bundle Size de la aplicaci贸n (librer铆as externas al framework).
    • Context ya viene integrado con React y no necesita librer铆as adicionales.
  • Middlewares:

    • Redux tiene una forma muy sencilla de poder extender la funcionalidad de nuestros disparadores o dispatchers como lo usaremos de nombre en la app. Permitiendo retener datos en un cierto punto antes de poder cambiar el estado.
  • Curva de Aprendizaje:

    • Redux requiere de aprender un nuevo paradigma, entender el ciclo de vida de los datos y aprender sobre la sintaxis
    • Context tiene una curva de aprendizaje m谩s ligera.

-Rendering:

  • Redux permite prevenir renders innecesarios
  • Context requiere de usar cosas como React.memo para evitar re-renders innecesarios
entiendo que redux es un context con esteroides y mejores state colocations.
Me interesa saber que tanto de redux hay en zustand <https://github.com/pmndrs/zustand>

Redux y la API de Contexto son dos soluciones de manejo de estado en React. Ambas tienen sus diferencias y ventajas.

Diferencias:
Abstracci贸n: Redux es una librer铆a de terceros m谩s abstracta que la API de Contexto, que es parte de la biblioteca React.

Complejidad: Redux es m谩s complejo que la API de Contexto debido a la necesidad de crear acciones, reductores y un almac茅n, mientras que la API de Contexto es m谩s sencilla de usar.

Accesibilidad del estado: El estado de Redux est谩 almacenado en un almac茅n centralizado y se accede a trav茅s de la suscripci贸n, mientras que la API de Contexto permite acceder al estado en cualquier parte de la aplicaci贸n a trav茅s del uso de un Proveedor y un Consumidor.

Ventajas:
Redux:
Escalabilidad: Redux es muy escalable debido a su estructura de almac茅n centralizado y reductores.
Depuraci贸n: Los cambios de estado en Redux son predecibles y f谩ciles de depurar debido a su estructura y la inmutabilidad del estado.
Compatibilidad: Redux es compatible con muchas otras librer铆as y herramientas debido a su popularidad y amplia comunidad.
API de Contexto:
Simplicidad: La API de Contexto es mucho m谩s sencilla y f谩cil de usar que Redux.
Integraci贸n nativa: La API de Contexto es una parte integral de la biblioteca React, lo que significa que no hay necesidad de instalar dependencias adicionales.
Rendimiento: La API de Contexto tiene un rendimiento mejor que Redux debido a su simplicidad y falta de abstracci贸n.

En resumen, Redux y la API de Contexto tienen sus propias ventajas y desventajas. La elecci贸n entre ellos depende de las necesidades espec铆ficas de la aplicaci贸n y de la preferencia personal del desarrollador.