Redux · Introducción

Redux es una de las bibliotecas más populares en desarrollo front-end en estos días. Sin embargo, muchas personas están confundidas acerca de qué es y cuáles son sus beneficios.

Como dice la documentación, Redux es un contenedor de estado predecible para aplicaciones de JavaScript. Para reformular eso, es una arquitectura de flujo de datos de aplicaciones, en lugar de una biblioteca tradicional o un marco como Underscore.js y AngularJS.

Lectura adicional en SmashingMag

• Por qué debería considerar React Native para su aplicación móvil
• Automatización de pruebas para aplicaciones, juegos y la web móvil
• Representación del lado del servidor con React, Node y Express
• Notas sobre la accesibilidad representada por el cliente

Redux fue creado por Dan Abramov alrededor de junio de 2015. Se inspiró en Flux de Facebook y el lenguaje de programación funcional Elm. Redux se hizo popular muy rápidamente debido a su simplicidad , tamaño pequeño (solo 2 KB) y excelente documentación. Si desea aprender cómo funciona Redux internamente y profundizar en la biblioteca, considere consultar el curso gratuito de Dan.

Redux se usa principalmente para la gestión del estado de la aplicación. Para resumir, Redux mantiene el estado de una aplicación completa en un solo árbol de estado inmutable (objeto), que no se puede cambiar directamente. Cuando algo cambia, se crea un nuevo objeto (usando acciones y reductores). Vamos a repasar los conceptos básicos en detalle a continuación.

¿En qué se diferencia de MVC y Flux?

Para dar un poco de perspectiva, tomemos el patrón clásico modelo-vista-controlador (MVC), ya que la mayoría de los desarrolladores están familiarizados con él. En la arquitectura MVC, existe una clara separación entre datos (modelo), presentación (vista) y lógica (controlador). Hay un problema con esto, especialmente en aplicaciones a gran escala: el flujo de datos es bidireccional. Esto significa que un cambio (una entrada de usuario o una respuesta de API) puede afectar el estado de una aplicación en muchos lugares del código, por ejemplo, el enlace de datos bidireccional. Eso puede ser difícil de mantener y depurar.

Flux es muy similar a Redux. La principal diferencia es que Flux tiene varias tiendas que cambian el estado de la aplicación y transmite estos cambios como eventos. Los componentes pueden suscribirse a estos eventos para sincronizarlos con el estado actual. Redux no tiene un despachador , que en Flux se usa para transmitir cargas útiles a devoluciones de llamadas registradas. Otra diferencia en Flux es que hay muchas variedades disponibles y eso crea cierta confusión e inconsistencia.

Beneficios de Redux

Es posible que se pregunte: "¿Por qué necesitaría usar Redux?" Gran pregunta. Hay algunos beneficios de usar Redux en su próxima aplicación:

• Previsibilidad del resultado
  Siempre hay una fuente de verdad, la tienda, sin confusión sobre cómo sincronizar el estado actual con las acciones y otras partes de la aplicación.
• mantenibilidad
  Tener un resultado predecible y una estructura estricta hace que el código sea más fácil de mantener.
• Organización
  Redux es más estricto sobre cómo se debe organizar el código, lo que hace que el código sea más consistente y más fácil de trabajar para un equipo.
• Representación del servidor
  Esto es muy útil, especialmente para el renderizado inicial, lo que mejora la experiencia del usuario o la optimización del motor de búsqueda. Simplemente pase la tienda creada en el servidor al lado del cliente.
• Herramientas de desarrollo
  Los desarrolladores pueden rastrear todo lo que sucede en la aplicación en tiempo real, desde acciones hasta cambios de estado.
• Comunidad y ecosistema
  Esta es una gran ventaja siempre que esté aprendiendo o utilizando cualquier biblioteca o marco. Tener una comunidad detrás de Redux lo hace aún más atractivo de usar.
• Facilidad de prueba
  La primera regla para escribir código comprobable es escribir funciones pequeñas que hagan una sola cosa y que sean independientes. El código de Redux es principalmente funciones que son solo eso: pequeñas, puras y aisladas.

Programación funcional

Como se mencionó, Redux se construyó sobre conceptos de programación funcional. Comprender estos conceptos es muy importante para comprender cómo y por qué Redux funciona de la manera que lo hace. Repasemos los conceptos fundamentales de la programación funcional:

• Es capaz de tratar funciones como objetos de primera clase.
• Es capaz de pasar funciones como argumentos.
• Es capaz de controlar el flujo usando funciones, recursiones y arreglos.
• Es capaz de utilizar funciones puras, recursivas, de orden superior, de cierre y anónimas.
• Es capaz de utilizar funciones auxiliares, como mapear, filtrar y reducir.
• Es capaz de encadenar funciones juntas.
• El estado no cambia (es decir, es inmutable).
• El orden de ejecución del código no es importante.

La programación funcional nos permite escribir código más limpio y modular. Al escribir funciones más pequeñas y simples que están aisladas en alcance y lógica, podemos hacer que el código sea mucho más fácil de probar, mantener y depurar. Ahora estas funciones más pequeñas se convierten en código reutilizable , y eso te permite escribir menos código, y menos código es algo bueno. Las funciones se pueden copiar y pegar en cualquier lugar sin ninguna modificación. Las funciones que tienen un alcance aislado y que realizan solo una tarea dependerán menos de otros módulos en una aplicación, y este acoplamiento reducido es otro beneficio de la programación funcional.

Verá funciones puras, funciones anónimas, cierres, funciones de orden superior y cadenas de métodos, entre otras cosas, muy a menudo cuando trabaje con JavaScript funcional. Redux usa funciones puras en gran medida, por lo que es importante comprender qué son.

Las funciones puras devuelven un nuevo valor basado en los argumentos que se les pasan. No modifican los objetos existentes; en cambio, devuelven uno nuevo. Estas funciones no dependen del estado desde el que se llaman y solo devuelven el mismo resultado para cualquier argumento proporcionado. Por esta razón, son muy predecibles.

Debido a que las funciones puras no modifican ningún valor, no tienen ningún impacto en el alcance ni ningún efecto secundario observable, y eso significa que un desarrollador puede concentrarse solo en los valores que devuelve la función pura.

¿Dónde se puede usar Redux?

La mayoría de los desarrolladores asocian Redux con React, pero se puede usar con cualquier otra biblioteca de vista. Por ejemplo, puede usar Redux con AngularJS, Vue.js, Polymer, Ember, Backbone.js y Meteor. Sin embargo, Redux más React sigue siendo la combinación más común. Asegúrese de aprender React en el orden correcto: la mejor guía es la de Pete Hunt, que es muy útil para los desarrolladores que están comenzando con React y están abrumados con todo lo que sucede en el ecosistema. La fatiga de JavaScript es una preocupación legítima entre los desarrolladores front-end, tanto nuevos como experimentados, así que tómese el tiempo para aprender React o Redux de la manera correcta en el orden correcto.

Una de las razones por las que Redux es increíble es su ecosistema. Hay muchos artículos, tutoriales, middleware, herramientas y repeticiones disponibles. Personalmente, uso el repetitivo de David Zukowski porque tiene todo lo que uno necesita para construir una aplicación de JavaScript, con React, Redux y React Router. Una palabra de precaución: Trate de no usar repeticiones y kits de inicio cuando aprenda nuevos marcos como React y Redux. Lo hará aún más confuso, porque no entenderá cómo funciona todo junto. Apréndalo primero y cree una aplicación muy simple, idealmente como un proyecto paralelo, y luego use modelos estándar para aplicaciones de producción para ahorrar tiempo.

Construyendo partes de Redux

Los conceptos de Redux pueden sonar complicados o sofisticados, pero son simples. Recuerda que la librería tiene solo 2 KB. Redux tiene tres partes de construcción: acciones, tienda y reductores.

Vamos a discutir lo que hace cada uno.

Comportamiento

En pocas palabras, las acciones son eventos. Las acciones envían datos desde la aplicación (interacciones del usuario, eventos internos como llamadas a la API y envíos de formularios) a la tienda. La tienda obtiene información solo de las acciones. Las acciones internas son objetos de JavaScript simples que tienen una propiedad de type (generalmente constante), que describe el tipo de acción y la carga de información que se envía a la tienda.

 { type: LOGIN_FORM_SUBMIT, payload: {username: 'alex', password: '123456'} }

Las acciones se crean con creadores de acciones. Eso suena obvio, lo sé. Son solo funciones que devuelven acciones.

 function authUser(form) { return { type: LOGIN_FORM_SUBMIT, payload: form } }

Llamar acciones en cualquier parte de la aplicación es muy fácil. Utilice el método de dispatch , así:

 dispatch(authUser(form));

reductores

Ya hemos discutido qué es un reductor en JavaScript funcional. Se basa en el método de reducción de matriz, donde acepta una devolución de llamada (reductor) y le permite obtener un valor único de múltiples valores, sumas de números enteros o una acumulación de flujos de valores. En Redux, los reductores son funciones (puras) que toman el estado actual de la aplicación y una acción y luego devuelven un nuevo estado. Comprender cómo funcionan los reductores es importante porque realizan la mayor parte del trabajo. Aquí hay un reductor muy simple que toma el estado actual y una acción como argumentos y luego devuelve el siguiente estado:

 function handleAuth(state, action) { return _.assign({}, state, { auth: action.payload }); }

Para aplicaciones más complejas, es posible usar la utilidad combineReducers() proporcionada por Redux (de hecho, se recomienda). Combina todos los reductores de la aplicación en un único reductor de índice. Cada reductor es responsable de su propia parte del estado de la aplicación y el parámetro de estado es diferente para cada reductor. La utilidad combineReducers() hace que la estructura de archivos sea mucho más fácil de mantener.

Si un objeto (estado) cambia solo algunos valores, Redux crea un nuevo objeto, los valores que no cambiaron se referirán al objeto anterior y solo se crearán nuevos valores. Eso es genial para el rendimiento. Para hacerlo aún más eficiente, puede agregar Immutable.js.

 const rootReducer = combineReducers({ handleAuth: handleAuth, editProfile: editProfile, changePassword: changePassword });

Tienda

Store es el objeto que contiene el estado de la aplicación y proporciona algunos métodos auxiliares para acceder al estado, enviar acciones y registrar oyentes. Todo el estado está representado por una sola tienda. Cualquier acción devuelve un nuevo estado a través de reductores. Eso hace que Redux sea muy simple y predecible.

 import { createStore } from 'redux'; let store = createStore(rootReducer); let authInfo = {username: 'alex', password: '123456'}; store.dispatch(authUser(authInfo));

Herramientas de desarrollo, viajes en el tiempo y recarga en caliente

Para facilitar el trabajo con Redux, especialmente cuando se trabaja con una aplicación a gran escala, recomiendo usar Redux DevTools. Es increíblemente útil, ya que muestra los cambios del estado a lo largo del tiempo, los cambios en tiempo real, las acciones y el estado actual. Esto le ahorra tiempo y esfuerzo al evitar el estado y las acciones actuales de console.log

Redux tiene una implementación ligeramente diferente del viaje en el tiempo que Flux. En Redux, puede volver a un estado anterior e incluso tomar su estado en una dirección diferente a partir de ese momento. Redux DevTools admite las siguientes funciones de "viaje en el tiempo" en el flujo de trabajo de Redux (piense en ellas como comandos de Git para su estado):

• Restablecer : restablece el estado con el que se creó su tienda
• Revertir : vuelve al último estado comprometido
• Barrido : elimina todas las acciones deshabilitadas que podría haber disparado por error
• Commit : convierte el estado actual en el estado inicial

La función de viaje en el tiempo no es eficiente en la producción y solo está destinada al desarrollo y la depuración. Lo mismo ocurre con DevTools.

Redux hace que las pruebas sean mucho más fáciles porque utiliza JavaScript funcional como base, y las funciones independientes pequeñas son fáciles de probar. Entonces, si necesita cambiar algo en su árbol de estado, importe solo un reductor que sea responsable de ese estado y pruébelo de forma aislada.

Crea una aplicación

Para concluir esta guía introductoria, construyamos una aplicación muy simple usando Redux y React. Para que sea más fácil de seguir para todos, me ceñiré al código JavaScript antiguo y usaré ECMAScript 2015 y 2016 lo menos posible. Continuaremos con la lógica de inicio de sesión que comenzamos anteriormente en esta publicación. Este ejemplo no usa datos en vivo, porque el propósito de esta aplicación es mostrar cómo Redux administra el estado de una aplicación muy simple. Usaremos CodePen.

1. Componente de reacción

Necesitamos algunos componentes y datos de React. Hagamos un componente simple y representémoslo en la página. El componente tendrá un campo de entrada y un botón (es un formulario de inicio de sesión muy simple). A continuación, agregaremos texto que represente nuestro estado:

2. Eventos y Acciones

Agreguemos Redux al proyecto y manejemos el evento onClick para el botón. Tan pronto como el usuario inicie sesión, enviaremos la acción con el tipo LOGIN y el valor del usuario actual. Antes de que podamos hacer eso, tenemos que crear una tienda y pasarle una función reductora como argumento. Por ahora, el reductor será solo una función vacía:

3. Reductores

Ahora que tenemos la activación de la acción, el reductor tomará esa acción y devolverá un nuevo estado. Manejemos la acción LOGIN que devuelve un estado de inicio de sesión y también agreguemos una acción LOGOUT , para que podamos usarla más tarde. El reductor auth acepta dos parámetros:

1. el estado actual (que tiene el valor predeterminado),
2. la acción.

4. Visualización del estado actual

Ahora que tenemos el estado inicial (el valor predeterminado en reducer) y el componente React listo, veamos cómo se ve el estado. Una mejor práctica es reducir el estado a los componentes secundarios. Debido a que solo tenemos un componente, pasemos el estado de la aplicación como una propiedad a los componentes de auth . Para que todo funcione en conjunto, tenemos que registrar el escucha de la tienda con un método auxiliar de subscribe , envolviendo ReactDOM.render en una función y pasándola a store.subscribe() :

5. Iniciar y cerrar sesión

Ahora que tenemos controladores de acciones de inicio y cierre de sesión, agreguemos un botón de cierre de sesión y enviemos la acción LOGOUT . El último paso es administrar qué botón mostrar para iniciar o cerrar sesión moviendo este inicio de sesión fuera del método de representación y representando la variable a continuación:

Conclusión

Redux está ganando terreno todos los días. Ha sido utilizado por muchas empresas (Uber, Khan Academy, Twitter) y en muchos proyectos (Apollo, WordPress' Calypso), con éxito en producción. Algunos desarrolladores pueden quejarse de que hay muchos gastos generales. En la mayoría de los casos, se requiere más código para realizar acciones simples como hacer clic en botones o cambios simples en la interfaz de usuario. Redux no es perfecto para todo. Tiene que haber un equilibrio. Quizás las acciones simples y los cambios en la interfaz de usuario no tienen que ser parte de la tienda Redux y se pueden mantener a nivel de componente.

Aunque Redux podría no ser la solución ideal para su aplicación o marco, le recomiendo que lo revise, especialmente para las aplicaciones React.

Créditos de la imagen de la portada: Lynn Fisher, @lynnandtonic