Diferencias entre Redux y Context

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 ‘prop 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

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 😊😊

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 “viajar 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.

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 ‘ló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

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.