javascript - new - React Context vs React Redux, ¿cuándo debo usar cada uno?

react new context api (5)

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?

Se lanzó React 16.3.0 y la API de Context ya no es una característica experimental. Dan Abramov (el creador de Redux) escribió un buen comentario here sobre esto, pero fueron 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?

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 está usando Redux para evitar transmitir accesorios, el contexto podría reemplazar a Redux, pero probablemente no necesitaba Redux en primer lugar.

El contexto tampoco le ofrece nada como Redux DevTools , la capacidad de rastrear sus actualizaciones de estado, middleware para agregar lógica de aplicación centralizada y otras capacidades poderosas que Redux habilita.

Redux es mucho más potente y ofrece una gran cantidad de características que la Context Api no proporciona, también como mencionó @danAbramov

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 realmente 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-thunk o redux-saga aún necesitarían redux. Además de esto, redux tiene otras bibliotecas asociadas como redux-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
puede reproducirlos 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 estas muchas aplicaciones, es demasiado pronto para decir que Redux será reemplazado por la nueva API de contexto

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 el estado / contexto local y Redux al mismo tiempo.

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 hoy y no lo ha usado en ningún lado, 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.

Si está utilizando Redux solo para evitar pasar accesorios a componentes profundamente anidados , entonces podría reemplazar Redux con la API de Context . 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, mantener un historial de todas las actualizaciones de estado, usar Redux DevTools , Redux Undo , Redux Persist , Redux Form , Redux Saga , Redux Logger , etc.), entonces no hay absolutamente ninguna razón para reemplazar Redux con la API de Context .

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. Pero esa es solo mi opinión. :)

Referencias