¿Qué es Redux y por qué es importante en el desarrollo web?

Por definición, Restored es un "contenedor de estado predecible para aplicaciones JavaScript". Para entender lo que esto significa, necesitamos aclarar algunas de estas definiciones.

Primero, saltemos al "estado". En términos de programación y aplicaciones, un estado representa todo lo combinado para mantener una aplicación en ejecución.

A continuación, añadimos el término “predecible”, que nos da un estado consistente independientemente del entorno en el que se ejecute.

Ahora podemos crear una capa "contenedor", que es una aplicación completamente encapsulada que incluye todo lo que necesita para ejecutarse.

Por lo tanto, un contenedor de estado predecible es una aplicación en contenedores que es capaz de permanecer en un estado de ejecución consistente. Por supuesto, con Redux hablamos de una aplicación escrita en JavaScript.

Una mirada más profunda a los estados.

Considere esto: usa la aplicación X en su teléfono inteligente, hace algunas cosas con esa aplicación y luego cambia a la aplicación Y y hace cosas diferentes. Cuando usas la aplicación Y, te das cuenta de que olvidaste hacer algo con la aplicación X y vuelves a la primera aplicación. Cuando vuelva a abrir la aplicación original, estará en el mismo estado que tenía la última vez que salió de ella.

Este es el estado. Pero espera hay mas.

Hay tres principios a considerar para el estado:

• El estado de una aplicación siempre se almacena en un único objeto JavaScript.
• Aunque el estado es de solo lectura, se puede cambiar describiendo el cambio mediante una acción de JavaScript.
• Los cambios de estado son ejecutados por una función reductora, que acepta el estado actual y, mediante una acción, devuelve el nuevo estado (si hay un cambio) o el estado original (si no hay cambio).

Esto es principalmente algo básico. Redux es mucho más que eso.

¿Qué es Redux?

Redux comenzó cuando Facebook comenzó a tener problemas con el marco Modelo-Vista-Controlador, que es un patrón de diseño de software que separa una aplicación en tres componentes: Modelo (lógica relacionada con los datos), Vista (lógica de UI para una aplicación) y Controlador (interfaz). entre Modelo y Vista). Cuando Facebook necesitó hacer un escalamiento masivo, el marco MVC comenzó a fallar.

En este punto, Facebook lanzó Flux, que es un método unidireccional para actualizar el componente Ver y manejar acciones basadas en el usuario.

En junio de 2015, Dan Abramov creó Redux, que se basa en Flux de Facebook y el lenguaje de programación Elm. El gran cambio que Abramov hizo en Redux fue que solo usó una tienda y eliminó el despachador.

Un almacén es una forma de almacenar y gestionar de forma persistente colecciones de datos. Flux utilizó varias tiendas, Redux solo una. Entonces, si tiene varios componentes en una aplicación, solo hay un almacén que administra el estado de los componentes. Este almacenamiento puede transmitir cualquier estado a cualquier componente, lo que lo convierte en un modelo increíblemente efectivo y eficiente.

El despachador es un programa especial que se comunica con un planificador y lleva un proceso al estado deseado.

¿Es Redux un marco?

En resumen, no. En lugar de ser una biblioteca o marco tradicional, Redux es una arquitectura de flujo de datos de aplicaciones. Para usar Redux, se recomienda trabajar con Redux Toolkit, pero los componentes fundamentales de Redux son:

• Acción
• Reductores
• software intermedio
• Almacenar

Un marco de software es una plataforma de desarrollo que puede incluir bibliotecas de códigos, un compilador y las herramientas necesarias para crear aplicaciones completas. Redux, por otro lado, es simplemente una biblioteca de JavaScript con una única tarea: administrar el estado en aplicaciones de JavaScript.

Entonces, en lugar de crear aplicaciones con Redux, lo usa para asegurarse de que los estados de su aplicación JavaScript puedan administrarse.

El desarrollo de Redux también se usa comúnmente con bibliotecas como React y Angular. Con estas combinaciones es posible desarrollar interfaces de usuario que dependen de un estado deseado.

Y si bien se puede escribir una aplicación completa usando un marco, cuando esa aplicación comienza a volverse cada vez más compleja, usar un marco para administrar la lista cada vez mayor de componentes y estados de esa aplicación puede volverse muy complicado, si no imposible.

Este no es el caso de Redux.

¿Para qué se utiliza Redux?

En términos de programación, usaría Redux para aplicaciones donde los datos se comparten entre componentes. Por ejemplo, tiene una aplicación que utiliza un componente de inicio de sesión. Los datos del componente de inicio de sesión se comparten con el componente de estado. La mayoría de las aplicaciones que usan Redux son aplicaciones móviles (con excepciones, por supuesto). Algunos ejemplos de aplicaciones que utilizan Redux son:

• El depurador de Firefox.
• Franklin: una herramienta de anotación de secuencias de ADN.
• Portafolio CMS: CMS basado en Rails y herramienta de blogs.
• GitHunt: Reddit para GitHub.
• Datamaps: una plataforma para visualizaciones de mapas.
• Glsl Live Editor: un editor de sombreadores WebGL.
• Favesound: un reproductor de Soundcloud.
• Podbaby: un cliente de podcasts web.
• Gitchecker: muestra el estado de los proyectos de GitHub.

Los usos menos obvios de Redux son:

• Estado de la interfaz de usuario
• datos del formulario
• Datos API
• Persistir y rehidratar automáticamente un estado

Sin embargo, lo más impresionante es la lista de empresas que actualmente utilizan Redux. Esta lista incluye cosas como:

• Instagram
• Robin Hood
• Día libre
• Puerta del tablero
• Patreón

¿Redux es frontend o backend?

Antes de responder a esta pregunta, definamos frontend y backend en términos simples.

• Frontend es la interfaz de usuario o el software cliente.
• El backend es el servidor.

Dicho esto, ¿se utiliza Redux para el desarrollo front-end o back-end? La respuesta fácil es "ambas". Redux se puede utilizar para cualquier aplicación que dé alta prioridad a la capacidad de almacenar el estado.

Debe quedar claro que Redux se puede utilizar para interfaces de usuario del lado del cliente (frontend). Sin embargo, dado que Redux es solo JavaScript, también se puede utilizar en el lado del servidor (backend). Esto puede parecer contradictorio considerando que el backend tradicionalmente ha pretendido ser apátrida .

Un buen ejemplo del uso de Redux en el backend son los juegos multijugador que se ejecutan en un navegador y necesitan almacenar su estado en el servidor para garantizar que todos los jugadores tengan la misma vista del juego. En este caso, el servidor posee el estado y es visto como la “única fuente de verdad”.

¿Es Redux relevante?

Ha habido muchas publicaciones y comentarios en blogs que indican que Redux está muerto o que otra herramienta ha reemplazado a Redux. De hecho, Redux sigue siendo muy relevante. Y con el paquete oficial Redux Toolkit (que incluye el núcleo de Redux y proporciona utilidades para simplificar una serie de casos de uso comunes de Redux), es más fácil que nunca emplear esta biblioteca de JavaScript.

Si le gustó esto, asegúrese de consultar nuestros otros artículos sobre desarrollo web.

• ¿Qué es el diseño web sostenible y por qué es importante?
• ¿Qué es el diseño web?
• Por qué su empresa debería utilizar sitios web personalizados
• Por qué necesita agregar un bot de soporte a su sitio web
• Por qué debe preocuparse por los elementos vitales de su sitio web