React Context vs React Redux, ¿cuándo debo usar cada uno? [cerrado]

187

Se lanzó React 16.3.0 y la API de contexto ya no es una característica experimental. Dan Abramov (el creador de Redux) escribió un buen comentario aquí sobre esto, pero pasaron 2 años cuando Context todavía era una característica experimental.

Mi pregunta es, en su opinión / experiencia, ¿cuándo debo usar React Context sobre React Redux y viceversa?

Alfrex92
fuente
Si está comparando Redux y React Context API, es porque solo desea mantener los vars sincronizados entre los componentes. Consulte el duixpaquete npm. Es solo un simple administrador de estado con devoluciones de llamada, realmente fácil de implementar. Para ser claros: soy el creador.
Broda Noel

Respuestas:

208

Como Context ya no es una característica experimental y puede usar Context en su aplicación directamente y será excelente para transmitir datos a componentes profundamente anidados para los que fue diseñada.

Como Mark erikson ha escrito en su blog :

Si solo usa Redux para evitar pasar accesorios, el contexto podría reemplazar a Redux, pero probablemente no lo necesitaba en primer lugar.

El contexto tampoco le brinda nada como la Redux DevToolscapacidad de rastrear sus actualizaciones de estado, middlewareagregar lógica de aplicación centralizada y otras capacidades poderosas que lo Redux habilitan.

Reduxes mucho más potente y proporciona una gran cantidad de funciones que Context Apino proporciona, también como As @danAbramov mencionó

React Redux usa el contexto internamente pero no expone este hecho en la API pública. Por lo tanto, debe sentirse mucho más seguro usando el contexto a través de React Redux que directamente porque si cambia, la carga de actualizar el código estará en React Redux y no en usted.

Depende de Redux actualizar su implementación para cumplir con la última API de contexto

La última API de contexto se puede usar para aplicaciones en las que simplemente usaría Redux para pasar datos entre componentes, sin embargo, las aplicaciones que usan datos centralizados y manejan solicitudes de API en creadores de acciones que usan redux-thunko redux-sagaaún necesitarían redux. Aparte de esto, redux tiene otras bibliotecas asociadas comoredux-persist que le permiten guardar los datos de la tienda en localStorage y rehidratarse en la actualización, que es el contexto que la API todavía no admite.

Como @dan_abramov mencionó en su blog Es posible que no necesite Redux , que redux tiene una aplicación útil como

  • Persista el estado en un almacenamiento local y luego inicie desde él, fuera de la caja.
  • Llene previamente el estado en el servidor, envíelo al cliente en HTML y arranque desde él, listo para usar.
  • Serialice las acciones del usuario y adjúntelas, junto con una instantánea del estado, a informes de errores automatizados, para que los desarrolladores de productos
    puedan reproducirlas para reproducir los errores.
  • Pase objetos de acción a través de la red para implementar entornos de colaboración sin cambios dramáticos en la forma en que se escribe el código.
  • Mantenga un historial de deshacer o implemente mutaciones optimistas sin cambios dramáticos en la forma en que se escribe el código.
  • Viaje entre el historial de estado en desarrollo y vuelva a evaluar el estado actual del historial de acción cuando cambie el código, a la TDD.
  • Proporcione capacidades completas de inspección y control a las herramientas de desarrollo para que los desarrolladores de productos puedan crear herramientas personalizadas para sus
    aplicaciones.
  • Proporcione IU alternativas mientras reutiliza la mayor parte de la lógica empresarial.

Con todas estas aplicaciones, es demasiado pronto para decir que Redux será reemplazado por la nueva API de contexto.

Shubham Khatri
fuente
Ok, pero ¿qué pasa con la reutilización? Los contextos son completamente reutilizables, una vez que redux + thunk, y especialmente redux + saga, apenas lo son.
Yurii Haiovyi
44
@Daggett Una cosa que debemos entender es que redux no es contexto, se construyó sobre el contexto, la tienda que tienes se transmite por contexto, también puedes elaborar lo que quieres decir con reutilización
Shubham Khatri
Incluso el desarrollo de algo tan básico como un recipiente reutilizable con efectos secundarios se convierte en una pesadilla con redux. Redux está ajustado al nivel de la aplicación, y puede decir que todavía es reutilizable, etc., etc., pero decir reutilizable me refiero a totalmente reutilizable ... Sin espagueti de picos, construido como un paquete separado, y podría reutilizarse independientemente para la configuración de la aplicación .
Yurii Haiovyi
@YuriiHaiovyi Estoy de acuerdo con sus preguntas. Esta respuesta es básicamente una versión compilada de lo que dicen las publicaciones de blog vinculadas. Nada sobre compartir mi propia perspectiva, como si hubiera estado usando solo contexto, y luego me quedé estancado, y sentí que era una mala elección por algunas razones x, y, z y luego me mudé a Redux, Mobx que lo resolvió ... o al revés historia por ejemplo. Principalmente la gente pregunta o busca esto para ver si hay algunas historias malas o buenas que pueden ayudar a los lectores a pensar y tomar decisiones calculadas ... Entonces, mi pregunta, ¿qué camino eliges?
Arup Rakshit
44
¿Qué parte de redux no es reutilizable? Puede reutilizar fácilmente reductores, selectores, acciones y creadores de acciones en otra aplicación con redux (reaccionar, incluso angular).
Dávid Molnár
85

Si está utilizando Redux solo para evitar pasar accesorios a componentes profundamente anidados , entonces podría reemplazar Redux con elContext API. Está exactamente destinado a este caso de uso.

Por otro lado, si está utilizando Redux para todo lo demás (tener un contenedor de estado predecible, manejar la lógica de su aplicación fuera de sus componentes, centralizar el estado de su aplicación, usar Redux DevTools para rastrear cuándo, dónde, por qué y cómo el estado de su aplicación cambiado, o usando complementos como Redux Form , Redux Saga , Redux Undo , Redux Persist , Redux Logger , etc.), entonces no hay absolutamente ninguna razón para que abandone Redux. losContext API no proporciona nada de esto.

Y personalmente creo que la extensión Redux DevTools es una herramienta de depuración increíble y subestimada, que justifica por sí misma seguir usando Redux.

Algunas referencias:

GG.
fuente
12

Prefiero usar redux con redux-thunk para hacer llamadas API (también usando Axios) y enviar la respuesta a los reductores. Es limpio y fácil de entender.

La API de contexto es muy específica para la parte react-redux sobre cómo los componentes React están conectados a la tienda. Para esto, react-redux es bueno. Pero si lo desea, dado que Context es oficialmente compatible, puede usar la API de Context en lugar de react-redux.

Entonces, la pregunta debería ser Context API vs react-redux, y no Context API vs redux. Además, la pregunta es un poco obstinada. Como estoy familiarizado con react-redux y lo uso en todos los proyectos, continuaré usándolo. (No hay ningún incentivo para que cambie).

Pero si está aprendiendo redux solo hoy, y no lo ha usado en ninguna parte, vale la pena probar Context API y reemplazar react-redux con su código personalizado de Context API. Tal vez, es mucho más limpio de esa manera.

Personalmente, es una cuestión de familiaridad. No hay una razón clara para elegir uno sobre el otro porque son equivalentes. E internamente, react-redux usa Context de todos modos.

vijayst
fuente
10

Las únicas razones para usar Redux para mí son:

  • Desea un objeto de estado global (por varias razones, como depuración, persistencia ...)
  • Su aplicación es o será grande, y debería escalar a muchos desarrolladores: en tal caso, probablemente necesite un nivel de indirección (es decir, un sistema de eventos): activa eventos (en el pasado) y luego personas que no conoce en su la organización puede realmente escucharlos

Probablemente no necesite el nivel de indirección para toda su aplicación, por lo que está bien mezclar estilos y usar estado / contexto local y Redux al mismo tiempo.

Sebastien Lorber
fuente
1
  • Si necesita utilizar middleware para diversos fines.Por ejemplo, acciones de registro, informe de errores, envío de otras solicitudes en función de la respuesta del servidor, etc.
  • Cuando los datos provenientes de múltiples puntos finales influyen en un solo componente / vista.
  • Cuando desee tener un mayor control sobre las acciones en sus aplicaciones.Redux permite acciones de seguimiento y cambio de datos, simplifica enormemente la depuración.
  • Si no desea que la respuesta del servidor cambie directamente el estado de su aplicación. Redux agrega una capa, donde puede decidir cómo, cuándo y si se deben aplicar estos datos. El patrón observador. En lugar de crear múltiples editores y suscriptores en toda la aplicación, simplemente conecta los componentes a la tienda Redux.

De: ¿ Cuándo usar Redux?

Michał Rejman
fuente