Diferencias entre Redux y Context

4/22
Recursos

Aportes 7

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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.

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.