Redux · Introducción

Redux es un contenedor de estado predecible para aplicaciones JavaScript. Es una arquitectura de flujo de datos de aplicaciones, en lugar de una biblioteca tradicional o un marco como Underscore.js y AngularJS. Se utiliza principalmente para la gestión del estado de las aplicaciones. Para resumirlo, Redux mantiene el estado de una aplicación completa en un único árbol de estado (objeto) inmutable, que no se puede cambiar directamente. Cuando algo cambia, se crea un nuevo objeto (usando acciones y reductores). Hoy, Alex Bachuk repasará en detalle los conceptos centrales.

Redux es una de las bibliotecas más populares en el 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 indica la documentación , Redux es un contenedor de estado predecible para aplicaciones JavaScript. Para reformularlo, es una arquitectura de flujo de datos de aplicaciones, en lugar de una biblioteca tradicional o un marco como Underscore.js y AngularJS.

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 (sólo 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 utiliza principalmente para la gestión del estado de las aplicaciones. Para resumirlo, Redux mantiene el estado de una aplicación completa en un único árbol de estado (objeto) inmutable, que no se puede cambiar directamente. Cuando algo cambia, se crea un nuevo objeto (usando acciones y reductores). A continuación repasaremos los conceptos básicos en detalle.

¿En qué se diferencia de MVC y Flux?

Para dar una cierta 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 del 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). Esto puede ser difícil de mantener y depurar.

Flux es muy similar a Redux. La principal diferencia es que Flux tiene múltiples tiendas que cambian el estado de la aplicación y transmite estos cambios como eventos. Los componentes pueden suscribirse a estos eventos para sincronizarse con el estado actual. Redux no tiene un despachador , que en Flux se utiliza 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

Quizás 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.
• Organization
  Redux es más estricto en cuanto a 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 la representación inicial, ya 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 para desarrolladores
  Los desarrolladores pueden realizar un seguimiento de 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és aprendiendo o usando 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 pequeñas funciones que hagan una sola cosa y que sean independientes. El código de Redux se compone principalmente de 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 como 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 mediante funciones, recursiones y matrices.
• 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.
• 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 con alcance y lógica aisladas, 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 le 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 de 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 utiliza mucho funciones puras, por lo que es importante comprender cuáles son.

Las funciones puras devuelven un nuevo valor basado en los argumentos que se les pasan. No modifican objetos existentes; en cambio, devuelven uno nuevo. Estas funciones no dependen del estado desde el que se llaman y devuelven solo un mismo resultado para cualquier argumento proporcionado. Por eso 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 centrarse solo en los valores que devuelve la función pura.

¿Dónde se puede utilizar Redux?

La mayoría de los desarrolladores asocian Redux con React, pero se puede utilizar con cualquier otra biblioteca de vistas. Por ejemplo, puedes 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úrate 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ómate el tiempo para aprender React o Redux de la manera correcta y en el orden correcto.

Una de las razones por las que Redux es fantástico es su ecosistema . Hay muchos artículos, tutoriales, middleware, herramientas y textos estándar disponibles. Personalmente, uso el modelo estándar de David Zukowski porque tiene todo lo que uno necesita para crear una aplicación JavaScript, con React, Redux y React Router. Una advertencia: trate de no utilizar textos repetitivos ni kits de inicio cuando aprenda nuevos marcos como React y Redux. Lo hará aún más confuso, porque no entenderás cómo funciona todo en conjunto. Aprendalo primero y cree una aplicación muy simple, idealmente como un proyecto paralelo, y luego use textos estándar para aplicaciones de producción para ahorrar tiempo.

Partes de construcción de Redux

Los conceptos de Redux pueden parecer complicados o sofisticados, pero son simples. Recuerde que la biblioteca es de sólo 2 KB. Redux tiene tres partes de construcción: acciones, tienda y reductores.

Analicemos qué 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 API y envíos de formularios) a la tienda. La tienda obtiene información sólo de las acciones. Las acciones internas son objetos JavaScript simples que tienen una typepropiedad (generalmente constante) que describe el tipo de acción y la carga útil 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    }}

Entonces, llamar acciones en cualquier lugar de la aplicación es muy fácil. Utilice el dispatchmétodo, 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 a partir 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, combineReducers()es posible utilizar la utilidad proporcionada por Redux (de hecho, recomendada). 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 combineReducers()utilidad hace que la estructura del archivo 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 valores nuevos. 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});

Almacenar

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 mediante 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 recargas en caliente

Para que sea más fácil trabajar 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 console.logel estado actual y las acciones.

Redux tiene una implementación de viaje en el tiempo ligeramente diferente a Flux. En Redux, puedes volver a un estado anterior e incluso llevar tu 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 (considérelos como comandos Git para su estado):

• Restablecer : restablece el estado con el que se creó tu tienda.
• Revertir : vuelve al último estado comprometido
• Barrido : elimina todas las acciones deshabilitadas que hayas podido realizar por error.
• Confirmar : convierte el estado actual en el estado inicial.

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

Redux facilita mucho las pruebas porque utiliza JavaScript funcional como base y las pequeñas funciones independientes 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.

Crear una aplicación

Para concluir esta guía introductoria, creemos una aplicación muy simple usando Redux y React. Para que sea más fácil de seguir para todos, me apegaré al antiguo JavaScript, usando ECMAScript 2015 y 2016 lo menos posible. Continuaremos con la lógica de inicio de sesión iniciada anteriormente en esta publicación. Este ejemplo no utiliza 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:

Vea la introducción de Pen a Redux de Alex Bachuk ( @abachuk ) en CodePen .

2. Eventos y acciones

Agreguemos Redux al proyecto y manejemos el onClickevento del botón. Tan pronto como el usuario inicie sesión, enviaremos la acción con el tipo LOGINy 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á simplemente una función vacía:

Consulte la Introducción de Pen a Redux: Paso 2. Eventos y acciones de Alex Bachuk ( @abachuk ) en CodePen .

3. Reductores

Ahora que tenemos la acción activada, el reductor realizará esa acción y devolverá un nuevo estado. Manejemos la LOGINacción que devuelve un estado de inicio de sesión y también agreguemos una LOGOUTacción para que podamos usarla más tarde. El authreductor acepta dos parámetros:

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

Consulte la Introducción del lápiz a Redux: Paso 3. Reductores de Alex Bachuk ( @abachuk ) en CodePen .

4. Mostrar el estado actual

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

Consulte la Introducción del lápiz a Redux: Paso 4. Visualización del estado actual de Alex Bachuk ( @abachuk ) en CodePen .

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 LOGOUTacción. El último paso es administrar qué botón mostrar el inicio de sesión o el cierre de sesión moviendo este inicio de sesión fuera del método de renderizado y representando la variable a continuación:

Consulte la introducción del lápiz a Redux: paso 5. Iniciar sesión/cerrar sesión por Alex Bachuk ( @abachuk ) en CodePen .

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 tengan que ser parte de la tienda Redux y puedan mantenerse a nivel de componente.

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

Créditos de las imágenes de la portada: Lynn Fisher, @lynnandtonic

Otras lecturas

• 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 renderizada por el cliente

(rb, vf, al, il, mrn)Explora más en

• Codificación
• Herramientas
• Reaccionar
• redux
• javascript
• Técnicas