Índice
- ¿Qué es Redux?
- ¿Por qué debería importarle?
- ¿Qué puede hacer Redux?
- Desventajas de Redux
- Bonificación: Redux no es solo para reaccionar
- Conclusión
¿Sabes que el verdadero poder de Redux va más allá de gestionar el estado? ¿Quiere diseñar teniendo en cuenta cómo funciona Redux? Con la ayuda de este artículo, a Linton Ye le gustaría mostrarle una imagen completa de Redux: qué puede hacer, por qué hace sus cosas, cuáles son sus desventajas, cuándo usarlo y cómo se relaciona con el diseño. Incluso si no ha escrito ni una sola línea de código antes, aún es posible y beneficioso comprender Redux. Espere un inglés sencillo y garabatos, sin códigos ni charlas abstractas.
¿Has oído hablar de Redux? ¿Qué es? ¡No busques en Google, por favor!
- "Cosas sofisticadas de backend".
- “He oído hablar de ello, pero no sé qué es. ¿Quizás sea un marco de React?
- "Una mejor manera de almacenar y gestionar estados en una aplicación React".
Le he hecho esta pregunta a más de 40 diseñadores. Las anteriores son sus respuestas típicas. Muchos de ellos son conscientes de que Redux trabaja con React y su trabajo es la "gestión del estado".
¿Pero sabes qué significa realmente esta “gestión estatal”? ¿Sabes que el verdadero poder de Redux va más allá de gestionar el estado? ¿Sabes que Redux no necesariamente requiere React para funcionar ? ¿Quieres unirte a la discusión de tu equipo (o al menos a las charlas durante el almuerzo) sobre si usar Redux? ¿Quiere diseñar teniendo en cuenta cómo funciona Redux?
Con la ayuda de este artículo, me gustaría mostrarles una imagen completa de Redux : qué puede hacer, por qué hace sus cosas, cuáles son sus desventajas, cuándo usarlo y cómo se relaciona con el diseño.
Mi objetivo es ayudar a diseñadores como tú. Incluso si no has escrito ni una sola línea de código antes, creo que aún es posible y beneficioso (y divertido) entender Redux. Espere un inglés sencillo y garabatos, sin códigos ni charlas abstractas.
¿Listo para el viaje?
¿Qué es Redux?
En un nivel muy alto, Redux es una herramienta que los desarrolladores utilizan para hacerles la vida más fácil. Como muchos de ustedes habrán oído, su trabajo es la “gestión estatal”. Explicaré qué significa la gestión estatal unas cuantas secciones más adelante. Llegados a este punto os dejo con esta imagen:
¿Por qué debería importarle?
Redux tiene más que ver con el funcionamiento interno de una aplicación que con su apariencia. Es una herramienta algo compleja con una curva de aprendizaje pronunciada. ¿Significa eso que nosotros, como diseñadores, deberíamos mantenernos alejados de ello?
No. Creo que deberíamos aceptarlo. Un diseñador de automóviles debería entender para qué sirve el motor, ¿verdad? Para diseñar con éxito interfaces de aplicaciones, los diseñadores también deben tener conocimientos sólidos sobre lo que hay debajo del capó . Deberíamos aprender qué puede hacer, comprender por qué los desarrolladores lo utilizan y ser conscientes de sus ventajas e implicaciones.
“El diseño no es sólo lo que parece y se siente. El diseño es cómo funciona”.
—Steve Jobs
¿Qué puede hacer Redux?
Mucha gente usa Redux para administrar el estado en las aplicaciones React. Es el caso de uso más común en el mundo y Redux mejora los aspectos en los que React no funciona bien (todavía).
Sin embargo, pronto verás que el verdadero poder de Redux va mucho más allá. Comencemos por aprender qué significa realmente la gestión estatal.
Administración del Estado
Si no está seguro de lo que significa este "estado", reemplácelo con un término más genérico: "datos". El estado son datos que cambian de vez en cuando . El estado determina lo que se muestra en la interfaz de usuario.
¿Qué significa gestión estatal? En general, hay tres aspectos de los datos que necesitaríamos gestionar en una aplicación:
- Obteniendo y almacenando datos
- Asignar datos a elementos de la interfaz de usuario
- Cambiando datos
Digamos que estamos creando una página de tiros de Dribbble. ¿Cuáles son los datos que queremos mostrar en la página? Incluyen la foto de perfil del autor, el nombre, el GIF animado, el número de corazones, los comentarios, etc.
Primero, debemos recuperar todos estos datos de un servidor en la nube y colocarlos en algún lugar. A continuación, debemos mostrar los datos. Necesitamos asignar partes de estos datos a los elementos de la interfaz de usuario correspondientes que representen lo que realmente vemos en el navegador. Por ejemplo, asignamos la URL de la foto de perfil al srcatributo de una imgetiqueta HTML:
img src='https://url/to/profile_photo'Finalmente, necesitamos manejar los cambios en los datos. Por ejemplo, si un usuario agrega un nuevo comentario a un tiro de Dribbble o agrega una estrella, debemos actualizar el HTML en consecuencia.
Coordinar estos tres aspectos del estado es una parte importante en el desarrollo front-end, y React tiene diversos grados de soporte para esta tarea. A veces, la función integrada en React funciona bastante bien. Pero a medida que la aplicación se vuelve más compleja, su estado puede volverse más difícil de administrar solo con React. Es por eso que mucha gente empieza a utilizar Redux como alternativa.
Obteniendo y almacenando datos
En React, dividimos una interfaz de usuario en componentes. Cada uno de estos componentes se puede dividir en componentes más pequeños (consulte "¿ Qué es React? ").
Si nuestra interfaz de usuario está estructurada de esta manera, ¿cuándo recuperamos los datos y dónde almacenarlos antes de completar la interfaz de usuario?
Imagina que hay un chef viviendo en cada componente . Obtener datos de los servidores es como obtener todos los ingredientes necesarios para preparar platos.
Una forma ingenua es buscar y almacenar los datos donde y cuando sean necesarios. Es como si cada chef saliera a comprar verduras y carnes directamente de granjas lejanas.
Este enfoque es un desperdicio. Necesitaríamos llamar al servidor muchas veces desde muchos componentes, incluso para los mismos datos. Los chefs desperdiciarían mucha gasolina y tiempo viajando de un lado a otro.
Con Redux, recuperamos los datos una vez y los almacenamos en un lugar central, convenientemente llamado "almacenamiento". Luego, los datos están listos para ser utilizados en cualquier momento por cualquier componente. Esto no es diferente a tener un hipermercado cercano donde nuestros chefs pueden comprar todos los ingredientes. El hipermercado envía camiones para transportar verduras y carnes a granel desde las granjas. ¡Es mucho más eficiente que pedir a los chefs individuales que vayan ellos mismos a las granjas!
La tienda también sirve como única fuente de verdad. Los componentes siempre recuperan datos de la tienda, no de ningún otro lugar. Esto mantiene coherente todo el contenido de la interfaz de usuario.
Asignar datos a elementos de la interfaz de usuario
Solo con React, en realidad existe una mejor manera de buscar y almacenar datos. Podemos pedirle a nuestro amable chef Shotwell que haga las compras para todos sus amigos chefs. Conducía un camión a las granjas y llevaba las golosinas. Podríamos recuperar datos de un componente contenedor, por ejemplo, el componente "Shot" en el ejemplo de Dribbble, y usarlos como única fuente de verdad.
Este enfoque es más eficiente que la forma ingenua de obtener datos de cada componente. Pero, ¿cómo pasa Shotwell los ingredientes a otros chefs? ¿Cómo pasar los datos a los componentes que realmente representan elementos HTML? Pasamos datos de los componentes externos a los componentes internos como el bastón en un relevo, hasta que los datos llegan al destino.
Por ejemplo, la URL del avatar del autor debe pasarse de "Shot", a "ShotDetail", a "Title" y finalmente a la imgetiqueta. Si nuestros chefs viven en un apartamento, realmente se verá así:
Para entregar datos al destino, tendríamos que involucrar a todos los componentes en el camino, incluso si no necesitan los datos en absoluto. ¡Sería realmente molesto si hubiera muchos pisos!
¿Qué pasa si el hipermercado realiza entregas puerta a puerta? Con Redux 1 , podemos conectar cualquier dato a cualquier componente, sin afectar a otros componentes en absoluto, así:
1 Para ser absolutamente preciso, es otra biblioteca llamada react-reduxque entrega datos a los componentes de React, no Redux en sí. Pero dado que reaccionar-redux solo hace la plomería y la gente casi siempre usa Redux y reaccionar-redux juntos, creo que está bien incluir esto como uno de los beneficios de Redux.
Nota : en la última versión de React (16.3), hay una nueva API de "contexto" que hace casi el mismo trabajo en términos de conectar datos a los componentes. Entonces, si esta es la única razón por la que su equipo usa Redux, ¡considere seriamente actualizar a React 16.3! Consulte el documento oficial para obtener más información (advertencia: hay mucho código por delante). Blog sobre música Rock
Cambiar datos
A veces, la lógica de actualizar datos en una aplicación puede ser bastante compleja. Puede implicar múltiples pasos que dependen unos de otros. Es posible que debamos esperar las respuestas de varios servidores antes de actualizar el estado de la aplicación. Es posible que necesitemos actualizar muchos lugares del estado en diferentes momentos y en diferentes condiciones.
Puede resultar abrumador si no tenemos una buena estructura para toda esta lógica. El código sería difícil de entender y mantener.
Redux nos permite dividir y conquistar . Proporciona una forma estándar de dividir la lógica de actualización de datos en pequeños "reductores". Esos reductores trabajan juntos armoniosamente para completar una acción compleja.
Sin embargo, esté atento al desarrollo reciente de React. Al igual que con la API "contexto", es posible que haya una nueva API "setState" en una versión futura de React. Haría que fuera más fácil dividir la lógica de actualización compleja en partes más pequeñas. Una vez que esta nueva API esté disponible, es posible que ya no necesite Redux para administrar este aspecto de la administración del estado.
El verdadero poder de Redux
Hasta ahora, parece que Redux es solo una curita para React. La gente usa Redux para mejorar aspectos que React no hace bien (todavía). ¡Pero React se está poniendo al día rápidamente! De hecho, Dan Abramov, el creador de Redux, se unió al equipo central de React en Facebook hace un par de años. Han estado ocupados trabajando en las mejoras antes mencionadas para React: API de contexto (lanzada en 16.3), una mejor API de recuperación de datos (que se demostró en febrero de 2018), una mejor API setState, etc.
¿Hará que Redux quede obsoleto?
¿Adivina qué? ¡Aún no les he mostrado el verdadero poder de Redux!
Redux obliga a los desarrolladores a seguir algunas reglas estrictas, lo que le da a Redux mucho poder (¡sí, el poder de la disciplina!):
- Todos los datos (estado de la aplicación) deben describirse en texto claro. Deberías poder escribir todos los datos con un bolígrafo sobre un papel.
- Cada acción (cambio de datos) debe describirse en texto claro. Debes anotar lo que harás antes de cambiar algo. No puedes cambiar datos sin dejar una marca. Este proceso se llama "despachar una acción" en la jerga de Redux.
- Su código que cambia datos debe comportarse como una fórmula matemática. Debe devolver el mismo resultado dada la misma entrada. El cuadrado de 4 siempre es 16 sin importar cuántas veces lo ejecutes.
Cuando sigues estas reglas para crear aplicaciones, ocurre magia. Permite muchas funciones interesantes que de otro modo serían difíciles o costosas de implementar. Aquí hay unos ejemplos. 2
2 Recopilé estos ejemplos de la publicación de Dan Abramov " Es posible que no necesites Redux " y su " Hilo de preguntas para principiantes de React ".
Deshacer rehacer
La popular función deshacer/rehacer requiere planificación a nivel de sistema. Debido a que deshacer/rehacer necesita registrar y reproducir cada cambio de datos en la aplicación, debes tenerlo en cuenta en la arquitectura desde el principio. Si se hace como una ocurrencia tardía, requeriría cambiar muchos archivos, lo que es una receta para innumerables errores.
Debido a que Redux requiere que cada acción se describa en texto claro, el soporte para deshacer/rehacer es casi gratuito. Las instrucciones sobre cómo implementar deshacer/rehacer con Redux caben en una página simple .
Entorno colaborativo
Si está creando una aplicación similar a Google Docs donde varios usuarios trabajan juntos en una tarea compleja, considere usar Redux. Es probable que le sirva de mucho levantamiento de pesas.
Redux hace que sea muy fácil enviar lo que sucede a través de la red. Es sencillo recibir acciones que otro usuario realiza en otra máquina, reproducir los cambios y fusionarse con lo que sucede localmente.
UI optimista
La interfaz de usuario optimista es una forma de mejorar la experiencia del usuario de una aplicación. Hace que la aplicación parezca responder más rápido en una red lenta. Es una estrategia popular en aplicaciones que requieren respuestas en tiempo real, por ejemplo, un juego de disparos en primera persona.
Como ejemplo simple, en la aplicación de Twitter, cuando haces clic en el corazón de un tweet, es necesario solicitar al servidor que realice algunas comprobaciones, por ejemplo, si ese tweet aún existe. En lugar de esperar muchos segundos por el resultado, ¡la aplicación elige hacer trampa! Asume que todo está bien y muestra un corazón lleno de inmediato.
Este enfoque funciona porque la mayoría de las veces todo está bien. Cuando las cosas no están bien, la aplicación revertirá las actualizaciones anteriores de la interfaz de usuario y aplicará el resultado real del servidor, por ejemplo, mostrará un mensaje de error.
Redux admite una interfaz de usuario optimista de la misma manera que lo hace para deshacer y rehacer. Facilita registrar, reproducir y revertir cambios de datos cuando se recibe un resultado negativo del servidor.
Persistir y arrancar desde el estado
Redux facilita guardar lo que sucede en una aplicación en el almacenamiento. Más adelante, incluso si el ordenador se reinicia, la aplicación puede cargar todos los datos y continuar exactamente desde el mismo lugar, como si nunca hubiera sido interrumpido.
Si creas un juego con Redux, solo necesitarás un par de líneas más de código para guardar/cargar el progreso del juego, sin cambiar el resto del código.
Sistemas realmente extensibles
Con Redux, debes “enviar” una acción para actualizar cualquier dato en una aplicación. Esta restricción hace posible conectarse a casi todos los aspectos de lo que sucede en una aplicación.
Puede crear aplicaciones realmente extensibles donde el usuario puede personalizar cada función. Por ejemplo, consulte Hyper , una aplicación de terminal creada con Redux. La extensión "hiperpotencia" agrega chispas al cursor y sacude la ventana. ¿Qué te parece este modo “wow”? (Quizás no sea muy útil, pero sí suficiente para impresionar a los usuarios)
Depuración de viajes en el tiempo
¿Qué tal poder viajar en el tiempo al depurar una aplicación? Ejecutas la aplicación, rebobinas o avanzas varias veces para encontrar el lugar exacto cuando ocurre el error, corriges el error y vuelves a jugar para confirmar.
Redux hace realidad este sueño de los desarrolladores. Redux DevTools te permite manipular el progreso de una aplicación en ejecución como un video de YouTube, ¡arrastrando un control deslizante!
¿Como funciona? ¿Recuerda las tres reglas estrictas que aplica Redux? Ésa es la salsa secreta de la magia.
Informes de errores automatizados
Imagínese esto: un usuario encuentra algo mal en su aplicación y quiere informar el error. Ella recuerda y describe minuciosamente lo que ha hecho. Luego, un desarrollador intenta seguir los pasos manualmente para ver si el error vuelve a ocurrir. El informe de error puede ser vago o inexacto. El desarrollador tiene dificultades para encontrar dónde está el error.
Ahora, ¿qué tal esto? El usuario hace clic en el botón "Informar error". El sistema envía automáticamente lo que ha hecho al desarrollador. El desarrollador hace clic en el botón "Reproducir error" y observa cómo ocurre exactamente ese error. El insecto es aplastado en el acto, ¡todos contentos!
Esto es exactamente lo que sucedería si usa Redux Bug Reporter . ¿Como funciona? Las restricciones de Redux hacen maravillas.
Desventajas de Redux
Las tres reglas principales que aplica Redux son un arma de doble filo. Permiten funciones potentes, pero al mismo tiempo provocan desventajas inevitables.
Curva de aprendizaje pronunciada
Redux tiene una curva de aprendizaje relativamente pronunciada. Se necesita tiempo para comprender, recordar y acostumbrarse a sus patrones. No se recomienda aprender Redux y React al mismo tiempo si ambos son nuevos para usted.
"Código repetitivo
En muchos casos, usar Redux significa escribir más código. A menudo es necesario tocar varios archivos para que funcione una función simple. La gente se ha quejado del código "repetitivo" que tendrían que escribir con Redux.
Lo sé, esto suena contradictorio. ¿No dije que Redux permite implementar funciones con un código mínimo ? Esto es un poco como usar un lavavajillas. Primero, tendrías que dedicar tiempo a colocar cuidadosamente los platos en filas. Hasta entonces no verás los beneficios del lavavajillas: ahorra tiempo en lavar los platos, desinfectarlos, etc. ¡Tú tienes que decidir si el tiempo de preparación vale la pena!
Penalización por desempeño
Redux también podría tener un impacto en el rendimiento debido a las restricciones que impone. Agrega un poco de sobrecarga cada vez que cambian los datos. En la mayoría de los casos, no es gran cosa y la desaceleración no se nota. Aún así, cuando hay una gran cantidad de datos en la tienda y cuando los datos cambian con frecuencia (por ejemplo, cuando el usuario escribe rápidamente en un dispositivo móvil), la interfaz de usuario puede volverse lenta como resultado.
Bonificación: Redux no es solo para reaccionar
Un error común es pensar que Redux es solo para React. Parece que Redux no puede hacer nada sin React. De hecho, Redux complementa a React de algunas maneras importantes, como comentamos anteriormente. Es el caso de uso más común.
Sin embargo, de hecho, Redux puede funcionar con cualquier marco de front-end, como Angular, Ember.js o incluso jQuery, o incluso JavaScript básico. Intente buscarlo en Google, encontrará esto , esto , esto o incluso esto . ¡Las ideas generales de Redux se aplican en cualquier lugar!
Siempre que uses Redux sabiamente, podrás obtener sus beneficios en muchas situaciones, no solo en una aplicación React.
Conclusión
Como cualquier herramienta, Redux ofrece una compensación. Permite funciones potentes pero también tiene inconvenientes inevitables. El trabajo de un equipo de desarrollo es evaluar si la compensación vale la pena y tomar una decisión consciente.
Como diseñadores, si entendemos las ventajas y desventajas de Redux, podremos contribuir a esta toma de decisiones desde la perspectiva del diseño. Por ejemplo, ¿quizás podríamos diseñar la interfaz de usuario para mitigar el posible impacto en el rendimiento? ¿Quizás podríamos recomendar la inclusión de funciones de deshacer/rehacer para eliminar una gran cantidad de cuadros de diálogo de confirmación? ¿Quizás podríamos sugerir una interfaz de usuario optimista, ya que mejora la experiencia del usuario con un costo relativamente bajo?
Comprender los beneficios y limitaciones de una tecnología y diseñar en consecuencia. Creo que eso es lo que Steve Jobs quiso decir con "el diseño es cómo funciona".
Otras lecturas
- JavaScript básico, bibliotecas y la búsqueda de una representación DOM con estado
- Calendarios de eventos para Web simplificados con estas opciones comerciales
- Una guía para el kit de herramientas Redux con TypeScript
- El final de mi viaje Gatsby
(rb, ra, il, mrn)Explora más en
- Codificación
- Herramientas
- redux
- Reaccionar
- javascript
Tal vez te puede interesar:
- Diseño de un cuadro de texto, íntegro
- Diseño y construcción de una aplicación web progresiva sin marco (Parte 3)
- Escribir un motor de aventuras de texto multijugador en Node.js: diseño del servidor Game Engine (Parte 2)
- Componentes de diseño en React
¿Qué es Redux? Una guía para el diseñador
¿Qué es Redux?¿Por qué debería importarle?¿Qué puede hacer Redux?Desventajas de ReduxBonificación: Redux no es solo para reaccionarConclusiónClase mag
programar
es
https://aprendeprogramando.es/static/images/programar-que-es-reduxja-una-guia-para-el-disenador-943-0.jpg
2024-09-21
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente