Tribalyte Technologies Tribalyte Technologies
  • Inicio
  • Misión y visión
  • Nuestros expertos
  • Nuestras soluciones
  • Casos de éxito
  • Blog
  • Contáctanos
  • Únete al equipo
Tribalyte Technologies Tribalyte Technologies
  • Inicio
  • Misión y visión
  • Nuestros expertos
  • Nuestras soluciones
  • Casos de éxito
  • Blog
  • Contáctanos
  • Únete al equipo
Nov 08

Introducción a Redux

  • noviembre 8, 2019
  • José Luis Coalla
  • No Comments
  • Consejos tecnológicos, Desarrollo de software, Tecnologías

Uno de los problemas más comunes a la hora de desarrollar una aplicación es decidir la mejor manera de tratar y guardar la información de la misma. Una opción simple podría ser guardar todos estos datos en ficheros, otra es realizar llamadas a una API de lado servidor desde cada una de las vistas, o incluso se podrían guardar de manera intermedia en el almacén local del navegador («localStorage» o «sessionStorage»). Una de las soluciones a este problema es Redux, una librería que implementa el patrón de diseño «flux» ayudando así a manejar el estado de una aplicación.

El estado puede ser, por ejemplo:

  • Información del usuario; como su nombre de usuario.
  • Selecciones y acciones del usuario; como cuando navega por la aplicación.
  • Datos obtenidos de un servidor.
  • Estado de la vista.
  • Donde está el usuario (“Router Data”).
  • Cualquier otra información que la aplicación constate.

Está pensado, sobre todo, para aplicaciones de mediana o larga envergadura, ya que en aplicaciones simples el flujo de datos no es tan complicado y aumentaría innecesariamente la complejidad de nuestra aplicación.

Normalmente, encapsulamos la información o los datos en un componente de la aplicación. Como hemos comentado anteriormente, si se tratase una aplicación simple, esto no supondría mayor problema ya que podremos tratar los datos fácilmente. El problema llega cuando estamos realizando un proyecto de mayor complejidad, en el que guardamos o utilizamos la misma información en distintos componentes sin un antecesor común.

Tribalyte_Redux1

Evidentemente, estos datos deberían estar sincronizados en cada uno de los componentes en los que se utilice, pero, al no tener un padre común en el que actualizar una vez esa información, deberemos cambiarlos de distinta manera; normalmente utilizando eventos.

En una aplicación grande, acabaríamos teniendo un “spaguetti” de eventos, por lo que si quisiéramos realizar un seguimiento del estado de la aplicación en un momento específico, tendríamos que navegar e investigar toda la lógica de la aplicación en profundidad. Los datos de la aplicación estarían actualizándose de una manera no predictiva, y, añadir una funcionalidad nueva puede ser aún más complicado ya que no sabemos a ciencia cierta cómo puede afectar este nuevo flujo de datos a todos estos eventos. De aquí nace la filosofía de Redux, que nos permite manejar el estado de la aplicación de una manera predictiva.

Como es lógico, la implementación de Redux conlleva un esfuerzo en seguir el patrón escrupulosamente, por lo que, como hemos mencionado anteriormente, lo adecuado es implementarlo en aplicaciones de tamaño mediano o grande, en las que:

  • Usemos copias independientes de la misma información en diferentes componentes.
  • Haya diferentes vistas que trabajen con los mismos datos y tengan que estar sincronizadas.
  • Los datos puedan ser actualizados por diferentes usuarios.

En Redux existen tres piezas fundamentales:

  • Store
  • Actions
  • Reducers

Store es un objeto JS que contiene la información del estado de la aplicación.

{
 notifications: [],
 newNotifications: 5,
 soundEnabled: true
}

Al tratarse de un único objeto para todos los componentes que lo utilicen, si uno de estos modifica dicha información, esta se actualizará automáticamente en todos los demás componentes y será visible inmediatamente.

Redux_image2

Las acciones (actions) también son un objeto JS que representa que algo ha pasado. Semánticamente son similares a los eventos.

{ type: 'NOTIFICATION_READED' }

{ type: 'SEND_NOTIFICATION', body: '...' }

Se ve que son objetos que identifican la acción que ha ocurrido, y que según la acción pueden ir acompañadas de un cuerpo relacionado a la acción.

Un reducer es una función que especifica cómo cambia el estado de la aplicación como respuesta a una acción. Esta no modifica el estado, sino que devuelve un estado nuevo.

function reducer(state, action) {
 switch (action.type) {
 case 'INCREMENT': {
 return { count: state.count + 1 };
 }
 default: {
 return state;
 }
 }
}

Como resumen general, en uno de los componentes lanzaremos una acción, normalmente llamado ‘dispatch’. Esa acción será tratada en el ‘reducer’, que, estudiando el ‘type’ de la acción devolverá un estado u otro. Al componente, a través de la variable asociada al estado de la aplicación, le será notificado y plasmará gráficamente este cambio automáticamente, al igual que todos aquellos componentes que usen esa misma información.

Redux_imagen3

Cuando se utiliza Angular para desarrollar aplicaciones, existen dos implementaciones principales para integrar Redux:

  • ngrx: ngrx.io
  • angular-redux: github.com/angular-redux/platform

Os animo a investigar más sobre estas librerías ya que abren un mundo de posibilidades que pueden ayudarnos a mejorar el desarrollo de nuestras aplicaciones.

Espero que esta entrada os haya sido útil, y ¡estad a atentos futuros temas!

¡Un saludo!

Artículos Relacionados:

  • Desarrollo de aplicaciones con AWS AmplifyDesarrollo de aplicaciones con AWS Amplify
  • blog_tribalyte_consejo5 Consejos para ahorrar tiempo desarrollando en remoto
  • Patentar un software / patentar una app en España - Tribalyte Technologies & Tribalyte Ideas Blockchain y vacunas COVID-19 | Tribalyte Technologies | Alessandro Barbera FormicaPatentar un Software o una App en España | Guía práctica
  • Cómo crear app Android - Guía práctica - Tribalyte Technologies Blockchain y vacunas COVID-19 | Tribalyte Technologies | Alessandro Barbera FormicaCómo crear app Android | Guía práctica paso a paso
  • Depurando apps creadas con Ionic 3.xDepurando apps creadas con Ionic 3.x
  • Facebook
  • Twitter
  • LinkedIn
  • E-Mail

About The Author

José Luis es Ingeniero de Software. Su trabajo en Tribalyte se centra en el desarrollo web, específicamente en el desarrollo de aplicaciones híbridas full stack. Le encantaría dominar la utilización de frameworks como Angular e Ionic. Apasionado de las nuevas tecnologías, de aprender cada día algo nuevo y de aprovechar cada momento al máximo.

Leave a reply Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

ELIGE UNA CATEGORÍA

  • Blockchain
  • Consejos tecnológicos
  • Desarrollo de aplicaciones
  • Desarrollo de software
  • General
  • Sistema embebido
  • Tecnologías
  • Uncategorized

Una compañía dedicada al desarrollo de apps, software y soluciones embebidas para empresas.

SOCIOS

Contacto

Glorieta de Quevedo 8 6º2
28015 Madrid (ESPAÑA)
Phone: +34 919 049 820 E-Mail: contact@tribalyte.com Web: www.tribalyte.com
Sello PYME INNOVADORA 21/01/2025
PYME INNOVADORA
Válido hasta el 21 de enero de 2025
escudo de MEIC 21/01/2025

AYUDA

  • Política de privacidad
  • Política de calidad
  • Política de seguridad
  • Términos de uso

CERTIFICACIONES

⠀⠀⠀⠀⠀⠀⠀⠀⠀

SUBVENCIONES

Tribalyte Technologies S.L. ha    conseguido la ayuda C007/20-ED de Red.es para el impulso y la promoción de actividades de I+i y para el fomento de la inversión empresarial para desarrollar el proyecto iPatia. Así mismo, valoramos muy positivamente la contribución del FEDER, principal fondo de la política de cohesión europea, por lo que supone de impulso a nuestro trabajo y en consecuencia al crecimiento económico y la creación de empleo de esta región y de España en su conjunto.
Esta página web utiliza cookies para mejorar su experiencia de usuario y para recabar estadísticas anónimas de uso. Aceptar Más información