Qué es Redux: todo lo que debes saber sobre esta biblioteca

Si aún no sabes qué es Redux, en este artículo nos vamos a centrar en explicarte todo lo que deberías saber de esta biblioteca de JavaScript, así como sus utilidades, cómo se puede usar, etc. De esta forma, tendrás todas las herramientas necesarias para poderla integrar en tus próximos proyectos JS.

¡Vamos a ver cómo es Redux!

¿Qué es JavaScript?

JavaScript (JS), es un lenguaje de programación interpretado. Se considera un dialecto del estándar ECMAScript y se caracteriza por ser orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico. A pesar de su nombre, no hay que confundirlo con Java. Su creación se basa en consideraciones comerciales, tras la adquisición de Sun Microsystems (creador de Java) por parte de Netscape Navigator (creador de LiveScript) y el cambio de nombre del lenguaje de programación.

Principalmente se utiliza en el lado del cliente, formando parte integral de los navegadores web. Esto permite mejorar la interfaz de usuario y crear páginas web dinámicas. Además, JavaScript se puede emplear en el lado del servidor, conocido como Server-side JavaScript o SSJS. Su aplicabilidad se extiende más allá de la web, encontrando uso en documentos PDF y aplicaciones de escritorio, principalmente widgets, etc.

La sintaxis de JavaScript se asemeja a la de lenguajes como C++ y Java, aunque adopta nombres y convenciones de Java, de ahí su nombre. Pero, como he comentado anteriormente, es importante destacar que, a pesar de su nombre similar, Java y JavaScript tienen semánticas y propósitos diferentes.

Por otro lado, hay que recordar que JavaScript utiliza una implementación del Document Object Model (DOM), y que JS es el único lenguaje de programación que los navegadores comprenden de forma nativa. Inicialmente, se utilizaba en páginas web HTML para operaciones en el cliente sin acceso al servidor. Sin embargo, en la actualidad, se emplea ampliamente para enviar y recibir información del servidor, a menudo en combinación con tecnologías como AJAX. JavaScript se interpreta en el agente de usuario mientras las sentencias se descargan junto con el código HTML.

Aplicaciones de JS

JavaScript es un lenguaje de programación ampliamente utilizado en una variedad de aplicaciones y contextos, como por ejemplo:

• Desarrollo web: es esencial en el desarrollo web. Se utiliza para mejorar la interactividad y la experiencia del usuario en sitios web y aplicaciones web. Se utiliza en la creación de formularios interactivos, efectos visuales, validaciones de datos en tiempo real y navegación dinámica, entre otros. Presente en:
  • Front-end web: es la piedra angular del desarrollo front-end. Frameworks y bibliotecas como React, Angular y Vue.js se basan en JavaScript para crear interfaces de usuario interactivas y dinámicas en aplicaciones web.
  • Back-end web: a través de plataformas como Node.js, JavaScript se utiliza en el lado del servidor para construir aplicaciones web completas. Esto permite que un desarrollador use JavaScript tanto en el front-end como en el back-end de una aplicación, lo que facilita la sincronización de datos y la construcción de aplicaciones en tiempo real.
  • Aplicaciones de servidor: Aunque no es tan común como otros lenguajes en el lado del servidor, JavaScript se usa en el desarrollo de aplicaciones de servidor a través de Node.js. Esto es especialmente útil para aplicaciones en tiempo real y aplicaciones que manejan una gran cantidad de solicitudes concurrentes.
• Aplicaciones móviles: se utiliza en el desarrollo de aplicaciones móviles híbridas utilizando frameworks como React Native y Ionic. Estos frameworks permiten a los desarrolladores escribir una vez y ejecutar la aplicación en múltiples plataformas, como iOS y Android.
• Juegos en línea: se usa en el desarrollo de juegos en línea y juegos para navegadores. Las bibliotecas como Phaser y Three.js facilitan la creación de juegos 2D y 3D interactivos en el navegador.
• Aplicaciones de escritorio: a través de herramientas como Electron, es posible construir aplicaciones de escritorio multiplataforma utilizando tecnologías web como HTML, CSS y JavaScript.
• Extensiones del navegador: para agregar funcionalidad adicional a los navegadores web, se utilizan extensiones. Estas extensiones suelen estar escritas en JavaScript.
• Aplicaciones de Internet de las cosas (IoT): se usa en el desarrollo de aplicaciones y sistemas para dispositivos IoT debido a su capacidad para comunicarse con hardware y sensores a través de API y bibliotecas especializadas.

¿Qué es Redux y cómo funciona?

Redux es una biblioteca de código abierto de JavaScript que se utiliza para gestionar el estado en aplicaciones, e influenciada por el lenguaje funcional Elm. Suele combinarse con otras bibliotecas como React o Angular para construir interfaces de usuario. Fue concebida por Dan Abramov y Andrew Clark, quienes se inspiraron en la biblioteca de Facebook llamada Flux.

En términos generales, Redux es una librería pequeña con una API sencilla y limitada, diseñada para actuar como un recipiente predecible del estado de la aplicación. Su funcionamiento se asemeja al concepto de «reducer» en la programación funcional.

La historia de Redux se remonta a 2015, cuando Dan Abramov comenzó a desarrollar la primera versión de Redux mientras se preparaba para dar una charla en la conferencia React Europe sobre Hot Reloading. Durante este proceso, Abramov notó la similitud entre el patrón Flux y la función reducer. Esta observación lo llevó a preguntarse si un almacén Flux podría ser en realidad una función reducer.

Para llevar a cabo esta idea, Abramov se puso en contacto con Andrew Clark, quien era el autor de la implementación de Flux llamada Flummox. Juntos colaboraron para dar vida a Redux y definieron una API coherente. Además, implementaron la capacidad de extensión mediante middleware y store enhancers, lo que contribuyó significativamente al ecosistema de Redux actual, expandiendo aún más sus posibilidades.

Relación Redux y React: qué es React

React es una biblioteca JavaScript que se centra en la creación de interfaces de usuario, aunque su versatilidad va más allá de esa definición. Esta herramienta, desarrollada inicialmente por Facebook, es de código abierto y se utiliza ampliamente debido a su capacidad para crear rápidamente interfaces de usuario en una variedad de aplicaciones, incluyendo aplicaciones web de una sola página (SPA o Single Page Application) y aplicaciones para Android e iOS.

A diferencia de otros frameworks, como Angular, que ofrecen enfoques más complejos, React se destaca por su capacidad para generar interfaces de usuario de manera eficiente. Esto se logra gracias al uso de archivos .jsx, que combinan la lógica y la interfaz de usuario en un solo archivo y se organizan en unidades llamadas componentes.

Virtual DOM: ¿qué es?

Cuando nos adentramos en el mundo de ReactJS, es probable que escuchemos con frecuencia sobre el concepto del Virtual DOM. Esta idea se origina a partir de una ingeniosa noción: en lugar de actualizar todo el DOM real, solo modificamos la parte que realmente necesita cambios. En las aplicaciones JavaScript antiguas, solíamos recibir datos en formato JSON desde el servidor y luego generábamos un nuevo HTML completo para renderizar, lo que resultaba en una actualización de toda la página en cada modificación.

Cómo instalar y configurar Redux en tu proyecto

Si quieres saber cómo instalar Redux, lo cierto es que no es nada complicado. Para ello debes ir al terminal y desde allí debes ejecutar el siguiente comando:

npm i -S redux

Ahora ya tienes instalada la versión estable de Redux en tu sistema. Por supuesto, es probable que tengas que resolver algunas dependencias, como tener instalado npm, el gestor de paquetes de Node.js. Una vez hecho esto, ahora vamos a instalar React, que necesitarás también para aprovechar Redux, así como las herramientas de desarrollo para poder comenzar a crear tus proyectos.

Para instalar estos otros paquetes, los comandos que debes ejecutar son:

npm i -S react-redux
npm i -D redux-devtools

Ahora ya lo tendrías todo listo para comenzar. Si te diriges a la carpeta o directorio principal donde se ha instalado Redux, verás que existen varios subdirectorios o subcarpetas, como STORE, REDUCERS, ACTIONS, TYPES. Debes conocer qué es cada uno:

• ACTIONS: son objetos que deben tener dos propiedades, una que describe el tipo (TYPE) de acción y otra que describe lo que debe cambiarse en el estado de la app.
• REDUCERS: los reductores son funciones que implementan el comportamiento de las acciones. Cambian el estado de la app, según la descripción de la acción y de la descripción del cambio de estado.
• STORE: es el lugar donde se reúnen las acciones y los reductores, manteniendo y cambiando el estado de la app. Solo existe uno.
• TYPES: como antes he dicho, es el tipo de acción.

Ejemplo práctico: Creando una aplicación con Redux

Un ejemplo usando Redux podría ser el siguiente, donde se hace una app simple contadora empleando Redux. Pero para ello, primero hay que configurar Redux y definir tus acciones y reductores:

// Importa las bibliotecas de Redux
import { createStore } from 'redux';

// Definir las acciones
const incrementAction = { type: 'INCREMENT' };
const decrementAction = { type: 'DECREMENT' };

// Definir el reductor
const counterReducer = (state = 0, action) => {
     switch (action.type) {
          case 'INCREMENT':
                return state + 1;
          case 'DECREMENT':
                return state - 1;
          default:
                return state;
      }
};

// Crear la tienda (store) de Redux
const store = createStore(counterReducer);

// Suscribirse a cambios en la tienda
store.subscribe(() => {
     console.log('Estado actual del contador:', store.getState());
});

// Dispatch de acciones para modificar el estado
store.dispatch(incrementAction);
store.dispatch(incrementAction);
store.dispatch(decrementAction);

Este es un ejemplo muy simple de cómo usar Redux. En una aplicación más grande, definirías acciones y reductores más complejos y conectarías componentes de React para acceder y actualizar el estado de la tienda. Pero al menos, esto te da una idea de cómo funciona…