UNIVERSIDAD MAYOR DE SAN SIMON

FACULTAD DE CIENCIAS Y TECNOLOGIA

DIRECCIÓN DE POSGRADO

“Arquitectura Flux en Aplicaciones Web con

React y Redux”

TRABAJO FINAL PRESENTADO PARA OBTENER EL CERTIFICADO

DE DIPLOMADO EXPERTO EN DESARROLLO DE APLICACIONES
EMPRESARIALES VERSIÓN II

POSTULANTE : Emilson Rodriguez Fernandez

TUTOR : ING. EDSON ARIEL TERCEROS TORRICO

Cochabamba – Bolivia

2019
Agradecimientos

A mis padres, mi querida esposa, mi hijo y mis

hermanos por todo el apoyo incondicional y
brindarme su colaboración en todo momento, estos me
permitieron llegar hasta donde estoy ahora.

A mi tutor, mis tribunales y a Digital Harbor por

brindarme los conocimientos, colaboración y
concederme esta oportunidad de superación.

A mis amigos, quienes siempre han estado a lado mío

durante este diplomado.

¡Muchas gracias!
2
Tabla de Contenido

Introducción ............................................................................................................. 8

1 Generalidades ................................................................................................ 10

1.1 Antecedentes generales ......................................................................... 10

1.2 Antecedentes específicos ....................................................................... 11

2 Metodología .................................................................................................... 12

3 Entendiendo la Arquitectura Flux y su estructura ........................................... 13

3.1 Actions .................................................................................................... 14

3.2 Dispatcher ............................................................................................... 15

3.3 Stores...................................................................................................... 16

3.4 Estado de las vistas ................................................................................ 16

4 Establecer una Arquitectura de datos con React y Redux .............................. 17

4.1 Concepto de React y Visrtual DOM ........................................................ 19

4.1.1 Componentes................................................................................... 19

4.1.2 El DOM ............................................................................................ 19

4.2 Principios Básicos de Redux ................................................................... 20

4.2.1 Store única fuente de la verdad ....................................................... 20

4.2.2 Estado de solo lectura ..................................................................... 21

4.2.3 Los cambios se hacen por medio de funciones puras ..................... 21

5 Implementación con React y Redux ............................................................... 23

5.1 Instalación como app react ..................................................................... 24

5.2 Estructura básica del proyecto ................................................................ 26

5.3 Instalación de Redux............................................................................... 26

5.4 Entorno de Implementación Redux ......................................................... 27

3
 5.4.1 Acciones .......................................................................................... 27

5.4.2 Creadores de Acciones .................................................................... 28

5.4.3 Reducers.......................................................................................... 29

5.4.4 Store ................................................................................................ 31

6 La relación Redux y React .............................................................................. 34

6.1 Componentes de Presentación y contenedores...................................... 34

6.2 Jerarquía de componentes ..................................................................... 34

6.2.1 Componentes de presentación ........................................................ 35

6.2.2 Componentes contenedores ............................................................ 35

6.2.3 Otros componentes .......................................................................... 35

6.2.4 Incluyendo el Store .......................................................................... 36

7 Acciones Asíncronas ...................................................................................... 36

7.1 El state shape ......................................................................................... 37

7.2 Manejando Acciones ............................................................................... 38

7.3 Creando Acciones Asíncronas ................................................................ 38

7.4 Flujo Asíncrono ....................................................................................... 39

7.5 Middleware .............................................................................................. 40

8 Conclusiones .................................................................................................. 40

4
Tabla de Figuras

Figura 1 Arquitectura del modelo Flux ................................................................... 12

Figura 2 Flujo de Dato de componente ................................................................. 13

Figura 3 Actions en el work flow de componentes Flux ......................................... 14

Figura 4 Representación de Acciones como puertas de entrada .......................... 15

Figura 5 Pseudo capa Distpacher ......................................................................... 15

Figura 6 Flujo de Actions a Stores y cambios de estado ....................................... 16

Figura 7 Comparación de vistas entre el patrón Flux y MVC ................................ 17

Figura 8 Logo React .............................................................................................. 18

Figura 9 Logo Redux ............................................................................................. 18

Figura 10 Flujo de Redux ...................................................................................... 19

Figura 11Arbol de elementos Html ........................................................................ 20

Figura 12 Diagrama de flujo de un Reducer .......................................................... 22

Figura 13 Inicialización de componentes............................................................... 23

Figura 14 Página principal node js ........................................................................ 24

Figura 15 Ejecucion del servidor node js ............................................................... 25

Figura 16 App React en ejecucion localhost puerto 3000 ..................................... 25

Figura 17 Instalación de Redux por node .............................................................. 27

Figura 18 Agregar funciones ................................................................................. 28

Figura 19 Declaración de acciones en el reducer ................................................. 30

Figura 20 Ejemplo de uso de acciones.................................................................. 31

Figura 21 Ejecución de cambio de estado............................................................. 32

Figura 22 Combinación de reducers en la función combineReducer .................... 33

Figura 23 Ejemplo de un modelo de datos ............................................................ 37

5
Resumen

Hoy en día es habitual encontrar proyectos desarrollados del lado del usuario final
resaltando la importancia de mejorar el estilo, la animación y la facilidad con la que
una persona puede entender y manejar un sistema o aplicación web a medida que
se manejan, se persisten y transforman los datos con los cuales el usuario maneja
el sistema es importante definir la forma más limpia y rápida posible en que el
sistema puede manejarlos.

Con tal propósito definido, la tecnología actual brinda a los desarrolladores más
opciones a la hora de desarrollar aplicaciones más amigables manejables y rápidas,
además de tener la capacidad de manejar un gran volumen de datos de forma
coherente y fluida, este es el mundo del desarrollo frontend y trabaja con tecnologías
tales como Ember.js, angular.js, angular.ts, react y muchos otros más.

Todas las herramientas o más precisamente frameworks creados para el desarrollo

frontend tienen como objetivo facilitar al desarrollador el desarrollo de interfaces de
usuario (UI) que interactúan directamente con el usuario final, estos frameworks
facilitan además el manejo de datos que se obtienen o se envían directamente a las
aplicaciones backend, aplicaciones que interactúan con los servidores en la nube,
estos datos pueden fácilmente cambiar en el tiempo en que el usuario final usa la
aplicación.

Y por qué es importante el manejo de datos para los frameworks frontend?, en

general los frameworks frontend pretenden manejar pequeñas funcionalidades en
componentes reutilizables, limpios fáciles de mantener y de crear, entonces como
parte de esta tecnología es necesario manejar muchos datos entre muchos
componentes, eso trajo en un inicio algunos problemas a los desarrolladores ya que
se podían perder datos o cambiarlos de forma indirecta mientras se movían entre
componentes, ese problema guio a los desarrolladores a crear nuevas formas de
solucionar este problema, una de las maneras más limpias de esta manipulación y
mutación de datos se conoce como patrón o arquitectura Flux.

6
Flux es una arquitectura creada por Facebook, implementado para la manipulación
unidireccional de los datos, de esta forma se manejan los datos de una forma más
limpia, fácil y ordenada.

“Flux no es un software, Flux es un conjunto de patrones que nosotros seguimos”

(Boduch, 2016)

7
Introducción

En la tecnología actual frameworks de trabajo con .js hay muchos, cada uno se
enfoca en hacer las cosas mejor y más fáciles que el anterior, algunos se encargan
de reparar fallos de otros, otros se centran en mejorar su núcleo o su concepto
general de desarrollo, un ejemplo de estos frameworks muy usados son ember y
angular, en sus dos versiones javascript y typescript, pero en este punto se creó un
nuevo framework React, con esta nueva herramienta han decidió romper con
algunas de las buenas practicas que se habían considerado en los últimos años en
el lado de ejecución del cliente, junto a la idea y características de la programación
funcional se formó un nuevo framework especial, que está influenciando a muchos
otros nuevos que están por venir.

React se encarga del trabajo solo en la vista de nuestra app, una vez que React
hace su trabajo para manejar, renderizar y mostrar vistas es que iniciamos con la
ayuda de una herramienta más, o de un conjunto de patrones, el patrón FLUX, como
ya se mencionó FLUX es una arquitectura o conjunto de patrones y no es un
framework, es así que dependiendo de la herramienta que se use algunos
frameworks implementan FLUX de distintas maneras. Flux se compone de tres
grandes partes, Dispatchers, Stores y Views.

El objetivo del documento es aprender como la herramienta Redux apoya a React

a gestionar informacion en un unico almacén o contenedor de datos que mantiene
orden entre componentes que comparten informacion comun en una aplicación
Web.

El aprendizaje de React no es difícil debido al parecido que maneja con las

estructuras de html y js, maneja los tags html, con su lógica de controlador
expresada en js todo en el mismo archivo, además que React trabaja con las series
de reglas de sintaxis ECMAScript, también es necesario conocer que React es una
librería ligera y simple, así que no se deben esperar el típico orden de patrones y
carpetas con que se manejan los otros frameworks. (Porcello, 2017)

8
Redux, el complemento de React para manejar Flux, es un contenedor de estados,
por estados nos referiremos a los datos que se están manipulando en el momento
en la vista y la lógica con React, esta herramienta hace más fácil manejar los
estados cambiarlos y mutarlos. (Abramov, 2015)

En este documento planteamos estructurar el uso y la fácil curva de aprendizaje que

se tiene el usar React junto a la arquitectura Flux con la ayuda de la herramienta
React, ayudando a los lectores a entender la arquitectura Flux orientada en Redux.

9
1 Generalidades

Mediante el uso de análisis de documentación, libros y la elaboración de un pequeño

proyecto se espera plantear el uso de React como una interesante herramienta de
desarrollo de software frontend que potenciado con Redux hará el uso de la
arquitectura Flux en un proyecto, también se planea entender de una mejor forma
la arquitectura y su uso.

1.1 Antecedentes generales

Tecnologías frontend son todas aquellas tecnologías que corren del lado del usuario
final, o sea en su navegador web, son un conjunto en su mayoría de tres lenguajes
de programación, javascript, Html y css, un desarrollador frontend en su trabajo se
dedica principalmente al uso de estas tecnologías, también debe conocer un poco
del manejo de tecnologías backend para poder consumir y entender el uso de
servicios remotos con los cuales interactuara para la manipulación de datos.

Normalmente en FrontEnd se encarga de estilizar la página de tal manera que la

página pueda quedar cómoda para la persona que la ve, es decir, esta persona,
debe de conocer técnicas de User Experience para dar una experiencia de usuario
cómoda a la persona que visita la página, así mismo debe de saber de diseño de
Interacción para que sepa colocar las cosas de tal manera que el usuario las pueda
ubicar de manera rápida y cómoda, es decir, el Backend posteriormente se
encargará de llenar las páginas de información (en ocasiones) y de colocar la página
en un servidor, pero esto de nada sirve si la página es fea, por tanto, el programador
del FrontEnd debe de saber un poco de diseño, (Xalambri, 2018)ya que como he
dicho anteriormente, este se va a encargar de que la página no solo se vea bonita
para el usuario, si no que sea cómoda de utilizar, cómoda de navegar e intuitiva.

Existen muchas tecnologías relacionadas a estos tres lenguajes que se utilizan en

el FrontEnd, por ejemplo, para JavaScript tenemos angular.js y backbone.js, que
son tecnologías avanzadas que utiliza el frontend, este se puede apoyar en librerías
de CSS y de JavaScript como animate.css y JQuery para poder dar una solución
amena y cómoda, así mismo, debe de conocer lenguajes de transferencia de

10
información como XML y JSON, y Ajax para hacer solicitudes sin necesidad de
refrescar la página, en pocas palabras, el FrontEnd, es el que se encargará de dejar
bonita la página, en ver que los datos se muestren de manera cómoda para el
usuario, de que la interacción que realice sea llamativa y en la estética del sitio.

Las tecnologías frontend en su amplio repertorio de frameworks han planteado

diferentes formas de manejo de datos, y entre esos diferentes formas del manejo
de la arquitectura Flux, para este proyecto planteamos el conocer mostrar y definir
uno de los frameworks más fáciles de aprender junta a una de las herramientas más
rápidas y de fácil aprendizaje para el uso de arquitectura Flux. (Muñoz, 2017)
(Xalambri, 2018)

1.2 Antecedentes específicos

Redux fue creada por Dan Abramov en 2015. A medida que la tecnología avanza
las aplicaciones tienen más capacidades y podemos implementar más y mejores
funcionalidades. Pero esto provoca que la complejidad de nuestros proyectos se
dispare. Una de las razones por las que aumenta la dificultad del mantenimiento es
el manejo del estado, tanto del modelo (información de terceros, datos creados
localmente, etc.) como de la interfaz (paginación, listas, elementos seleccionados,
etc.

Redux, se basa fuertemente en otros principios que comparten los lenguajes del
paradigma funcional. En concreto:

• Inmutabilidad: La modificación de estructuras de datos se realiza

mediante copia en vez de mutar el objeto original.
• Funciones puras: Ninguna función ha de lanzar efectos secundarios como
llamadas a servicios web, consultas a bases de datos, etc. Gracias a este
principio se consigue que el resultado de estas funciones sea
determinista.

Flux es una arquitectura para desarrollar aplicaciones Frontend creada por

Facebook para complementar a React, librería para el renderizado de componentes
web, también desarrollada por Facebook. Las aplicaciones de la empresa habían

11
crecido tanto que era imposible seguir manteniéndolas con el patrón Modelo Vista
Controlador incluso con frameworks para facilitarlo. La comunicación bidireccional
de la arquitectura dificultaba la depuración y rastreo de errores.

Por ellos, Flux pretende proporcionar un flujo de datos unidireccional a lo largo de

toda la aplicación, de forma que, cuando el usuario interactúa con la interfaz se
propagan acciones que son recogidas por un único manejador central encargado
de modificar el estado en los contenedores del estado de la aplicación.

(Abramov, 2015) (Boduch, 2016)

Figura 1 Arquitectura del modelo Flux

Fuente: Proyecto, Desarrollo de aplicaciones frontend con arquitectura Flux

(Muñoz, 2017)

2 Metodología

Para el presente trabajo se utilizaran los siguientes métodos de investigación

• Método Bibliográfico, debido a que se realizará la lectura y compilación

de libros, documentación de las tecnologías relacionadas al tema de
estudio.
• Método Analítico, debido a que se procederá a revisar y analizar
ordenadamente documentos relacionados al tema de estudio, para la
redacción del presente trabajo.
• Método empírico o de campo, debido a que se utilizara un ejemplo de
aplicación.

12
3 Entendiendo la Arquitectura Flux y su estructura

Flux es un conjunto de patrones que juntos definen una arquitectura que nos ayuda
en el manejo de lo que se conoce como estado o state de los datos en la vista,
también está compuesto por 3 grandes partes Dispatchers, Stores y Actions.

Flux es una arquitectura unidireccional de flujo de dato, por este motivo al

comportarse de forma unidireccional en el manejo de componentes hace casi
imposible el generar un bug en el manejo de los datos, Flux controla que la dirección
de los componentes no pueda causar un problema al momento del manejo de los
datos. (Boduch, 2016)

Figura 2 Flujo de Dato de componente

Fuente: Libro Arquitectura Flux (Boduch, 2016)

Considerando los tres componentes principales de Flux el manejo de estos datos

se realizará con lo que denominaremos Actions.

13
 Figura 3 Actions en el work flow de componentes Flux

Fuente: Proyecto, Desarrollo de aplicaciones frontend con arquitectura Flux

(Muñoz, 2017)

3.1 Actions

Flux define su flujo de trabajo en tres principios que se orientara a las capas que
trabajaran con su respectiva funcionalidad desde la capa que interactúa con el
usuario final hasta la capa que maneja los datos, la primera capa que definiremos
será la capa de Acciones o Actions.

Las acciones son los verbos del sistema, es por eso que el nombre de las acciones
generalmente derivan de la funcionalidad que queremos que haga, por ejemplo:

• Recuperar sesión

• Navegar entre características de páginas

• Filtrar lista de usuarios

Esta capa de la arquitectura Flux, las acciones son el punto de inicio, entonces más
propiamente dicho los Actions son nombres de funcionalidades que queremos que
manejen los payloads u objetos de datos en el frontend, como punto de entrada de
nuestra arquitectura los Actions no deben procesar directamente los payloads sino
que solamente son la puerta de entrada de estos a la funcionalidad que queremos
que las maneje. (Boduch, 2016)

14
 Figura 4 Representación de Acciones como puertas de entrada

Fuente: Libro Arquitectura Flux (Boduch, 2016)

3.2 Dispatcher

El distpacher es el encargado de regular el tráfico de las acciones hacia los store,

el distpacher es una especie de distribuidor que se encarga de direccionar los
actions hacia el correcto store, en pocas palabras un dispatcher no es más que un
mediador entre los stores y las acciones, sirve para desacoplar la capa de stores de
la capa de acciones, ya que la capa de acciones trabaja directamente con las vistas,
pero de esto hablaremos más adelante, de esta manera no relacionamos
directamente una acción con un store, entonces una acción podría usar cualquier
store dependiendo su funcionalidad. (Boduch, 2016)

Los Distpacher no se manejan necesariamente en una capa, esto debido a que en

una aplicación Flux generalmente solo hay un distpacher, entonces trabaja como
una especie de pseudo capa, muchas veces hasta puede ser importada de una
librería. (Boduch, 2016)

Figura 5 Pseudo capa Distpacher

15
 Fuente: Libro Arquitectura Flux (Boduch, 2016)

3.3 Stores

Los store son lo más parecido al modelo de la aplicación, guarda los datos/estados
de la app y, en Flux puede existir desde un solo Store hasta varios, básicamente los
datos que envían los servicios a la aplicación son almacenados en estos Stores,
entonces completando el ciclo de o flujo de Flux los Actions son el mecanismo de
envío de los datos, estos datos implican que se el Distpacher lo enviara a su Store
correspondiente, sin que esto signifique cambiar el store sino actualizar a un nuevo
estado.

Figura 6 Flujo de Actions a Stores y cambios de estado

Fuente: Libro Arquitectura Flux (Boduch, 2016)

Entonces no existe una forma lógica de cambiar los estados, sino que el que decide
si se cambia a un nuevo estado es el store, esto también implica que si necesitamos
ver o consultar alguna información con su estado actual debemos preguntar a los
Store. (Boduch, 2016)

3.4 Estado de las vistas

Es la última capa, técnicamente no es parte Flux, pero la capa de vista es una parte
importante en la aplicación, básicamente la capa de vista es la responsable
de interactuar, mostrar y recibir datos con los usuarios, por ejemplo,
comparando la estructura de capas de Flux con el patrón MVC básicamente
las vistas se encarga de mostrar los modelos.

16
 Figura 7 Comparación de vistas entre el patrón Flux y MVC

Fuente: Libro Arquitectura Flux (Boduch, 2016)

Analizando la imagen de comparación entre ambos patrones, claramente podemos

ver que el flujo similar parte de los eventos, pero a diferencia del MVC que propaga
el modelo al controlador el Flux desencadena o propaga una acción esto debido al
concepto que fuimos mencionando de que flux solo mantiene un flujo unidireccional,
en otras palabras si recibimos un response de API cambiara el estado, o actualizara
el store, de la misma manera en que lo hace un usuario haciendo clicks e
interactuando con la vista. (Boduch, 2016)

4 Establecer una Arquitectura de datos con React y Redux

React js junto con Redux son librerías que facilitan el manejo de las vistas que
permiten manejar eventos, estilos crear interfaces de usuarios agradables para el
usuario, además de facilitar para el desarrollador el escribir código e implementar
funcionalidad, se maneja de forma similar a cualquier proyecto o framework
estructurado bajo el principio de javascript, en cualquier versión ES5 o ES6, este
framework ayudara a crear la UI y la implementación de Flux. (Porcello, 2017)

17
 Figura 8 Logo React

Fuente: Google Images

Redux es un contenedor de estado predecible para aplicaciones java script, se

puede usar Redux junto a cualquier biblioteca de vistas, ayuda a escribir
aplicaciones que se comportan de forma coherente, y que se ejecutan en diferentes
entornos, ya sea del cliente o del servidor. (Abramov, 2015)

Figura 9 Logo Redux

Fuente: Articulo Como funciona Redux de Carlos Azaustre

18
Flux es una declaración de intenciones (Actions), en cambio Redux es una
implementación del patrón Flux, encapsulado en una librería para poder entenderlo
y usarlo, además de poder ser importado en cualquier tipo de ambiente de desarrollo
o framework, el flujo de Redux evoluciona solo un poco más pero mantiene la
esencia de Flux, o sea el flujo unidireccional de datos y propagar los cambios por
medio de acciones.

Figura 10 Flujo de Redux

Fuente: Documentación Redux por (Abramov, 2015)

4.1 Concepto de React y Visrtual DOM

React está orientada a desarrollar componentes que permiten construir páginas,

para ello se apoya en el Virtual DOM. (Caules, 2019)

4.1.1 Componentes

Un componente es un conjunto de etiquetas relacionadas de forma lógica que se

renderiza en una página HTML y permite su reutilización, un ejemplo frecuente son
un formulario o una tabla HTML. (Caules, 2019)

4.1.2 El DOM

DOM o Document Object Model es una estructura (en la memoria) que define todas
las etiquetas de una página HTML para posteriormente ser renderizado en el
navegador. (Caules, 2019)

19
 Figura 11Arbol de elementos Html

Fuente: Libro Desarrollo web con React (Caules, 2019)

Al trabajar con componentes se ven que cada uno de ellos está compuesto por un
conjunto de etiquetas html o nodos DOM que se relacionan formando la página
HTML. (Caules, 2019)

4.2 Principios Básicos de Redux

Flux de la mano de Redux es descrito en 3 principios fundamentales (Abramov,

2015)

4.2.1 Store única fuente de la verdad

El estado o datos de la aplicación se almacena en un árbol de objetos, o más

claramente podría ser un objeto json, esto facilita la creación de aplicaciones que
cambian el estado de este árbol de objetos, los componentes que necesiten los
datos acudirán al Store para recuperarlo.

Los componentes que manejan los datos del estado solo leen los datos, no los
manipulan. En el caso que ocurra una manipulación permanece sólo en ese
componente y no se transfiere al resto de la aplicación. (Abramov, 2015)

20
Para poder alterar el estado de la aplicación se usarán acciones. Las acciones
(actions) representan la única vía de producirse una modificación en el estado global
de la aplicación.

Las acciones son descriptivas de aquella modificación que se desea realizar y se

representan mediante un objeto Javascript. Ellas contienen, como mínimo, el tipo
de acción que se desea realizar.

4.2.2 Estado de solo lectura

El estado en cada componente solo deber ser de lectura y si tiene algún cambio
solo se reflejara en el actual componente, pero es obvio pensar que la app
necesitara cambiar e interactuar con este cambio de estado en cada componente,
entonces para poder reflejar estos cambios de estados para los distintos
componentes se deben usar los Actions que se encargan de reflejar los cambios de
estado. (Abramov, 2015)

4.2.3 Los cambios se hacen por medio de funciones puras

Para que una función se considere pura debe cumplir ciertas condiciones. (Fogus,
2013)

• Dados los mismos parámetros de entrada, debe retornar siempre el

mismo valor de salida, sin importar cuantas veces se llame
• La función no debe tener efectos colaterales o secundarios en su entorno.
(Fogus, 2013)

En Redux las funciones puras se conocerán como “Reducers”, los reducers siempre
reciben 2 parámetros una acción y un estado anterior, contendrá la lógica para
procesar las acciones y las consecuencias de estas, una vez ejecutada la lógica el
reducer retorna el nuevo estado.

Obviamente al hablar de Reducers como funciones puras estos no tendrán ningún

efecto en el ambiente en el que se están ejecutando para cambiar los estados de
los stores, entonces los reducers cambian estados, no guardan datos en BD, no

21
cambian las UI, no hacen llamadas Ajax o a servicios, no llaman a otras funciones
para realizar su trabajo.

Figura 12 Diagrama de flujo de un Reducer

Fuente Que es Redux (Alvarez, 2018)

La siguiente imagen muestra de una manera muy visual cómo la arquitectura de

componentes varía con y sin Redux. A un lado tenemos el diagrama de
componentes y flujo de los datos en una arquitectura tradicional, con data-biding de
una y dos direcciones, donde muchos componentes son capaces de manipular el
estado. Al otro lado tienes una arquitectura de componentes basada en Redux,
donde hay un store que alimenta a todos los componentes y donde cualquier
modificación se realiza por medio de una acción.

22
 Figura 13 Inicialización de componentes

Fuente que es Redux (Alvarez, 2018)

5 Implementación con React y Redux

Para implementar aplicaciones con React y Redux es necesario tener un ambiente

con Node.js, luego instalar React y React cli para poder crear proyectos
preconfigurados y funcionales mediante linea de comandos, que tienen una
estructura estandar de proyectos Node. Luego se debe instalar redux mediante
npm. Para usar redux se deben crear las acciones, creadores de acciones,
reductores, el store o almacén y los despachadores.

ReactJS es una biblioteca de JavaScript contenida en un solo archivo react-

<version>.js que se puede incluir en cualquier página HTML. La gente también suele
instalar la biblioteca React DOM react-dom-<version>.js junto con el archivo
principal React, los tags de importación de React js son:

<script type=”text/javascript” src=”/path-del-proyecto/react.js”></script>

<script type=”text/javascript” src=”/path-del-proyecto/react-dom.js”></script>

23
5.1 Instalación como app react

React se puede instalar como una un conjunto de archivos ya configurados para

crear una aplicación, estos archivos tienen la estructura de un Proyecto frontend,
para poder crear una aplicación React se hace el uso de una herramienta de versión
y manejo de archivos y librerías como ser node js, el entorno node js provee al
desarrollador un gran entorno para el manejo de otras librerías y para el propio react
js.

Figura 14 Página principal node js

Fuente: Manual de usuario Node js (Joyent, 2012)

Node js es una herramienta muy sencilla de usar siendo un instalador pug and play,
en su versión Windows solo necesitamos descargar e instalar.

Una vez instalado node js solo necesitamos ejecutar los comandos necesarios en
nuestra consola de sistema, en el caso de Windows cmd.

Npx create-react-app my-app-name

cd my-app-name

npm start

24
Los comandos listados arriba se encargan de crear la app react accede al nuevo
proyecto creado e inicializar el servidor local node js que compilara los archivos de
React para crear los modulos necesarios.

Figura 15 Ejecución del servidor node js

Fuente: Elaboración propia entorno local

Figura 16 App React en ejecución localhost puerto 3000

Fuente: Elaboración propia entorno local

25
5.2 Estructura básica del proyecto

La creación de una nueva app mediante node js crea ya un proyecto con la

estructura básica de archivos sobre los cuales se trabajan.

• node_modules: dependencias npm del proyecto

• public: la raíz de nuestro servidor donde se podrá encontrar el index.html,
el archivo principal y el favicon.ico, el icono de la aplicación.
• src: aquí es donde trabajaremos nuestro proyecto, donde vamos a colocar
los archivos de nuestros componentes React.

Además encontrarás estos archivos sueltos, como el readme, el package.json, etc.

El source-code genera una pre estructura generada ayuda al desarrollador a la hora

de iniciar un proyecto React.

Analizando además los archivos del proyecto básico encontramos que react
relaciona una vista html, index.html con un controlador del componente App.js, y los
maneja mediante su relacionador index.js, además de manejar un archivo .css en
donde se manejan los estilos que ayudan a la página a lucir mejor.

5.3 Instalación de Redux

Redux tiene una instalación mediante el manejador de paquetes node, de forma

muy similar a React, node como herramienta nos permite descargar distintas
versiones de las librerías que maneja para este proyecto manejaremos la última
versión que tiene Redux, para eso solo basta con ejecutar el comando la consola
de node, este comando instalara la última versión estable. (Xalambri, 2018)

26
 npm install redux

Figura 17 Instalación de Redux por node

Fuente: propia entorno local

Nuestro package.json se actualiza con nuestra última librería instalada.

Luego de la instalación de React y Redux procederemos a trabajar la estructura de

la arquitectura flux con Redux en el proyecto.

5.4 Entorno de Implementación Redux

Redux ayuda a los desarrolladores a implementar la arquitectura Flux y para poder

manejarlo y entenderlo se lo manejara por capaz.

5.4.1 Acciones

Las acciones son objetos planos de JavaScript. Una acción debe tener una
propiedad “type” que indica el tipo de acción a realizar. Los tipos normalmente son
definidos como strings constantes. (Abramov, 2015)

27
5.4.2 Creadores de Acciones

Los creadores de acciones son funciones que crean acciones. Es fácil combinar los
términos "acción" con "creador de acción. En implementaciones de Flux tradicional,
los creadores de acciones ejecutan el dispatch cuando son invocadas.

En cambio, en Redux los creadores de acciones simplemente regresan una acción.

Figura 18 Agregar funciones

Fuente: Documentación Redux por (Abramov, 2015)

28
Esto hace más portables y fáciles de probar. Para efectivamente iniciar un
despacho, pasa el resultado a la función dispatch(),La función dispatch() puede ser
accedida directamente desde el store como store.dispatch. (Abramov, 2015)

5.4.3 Reducers

Las acciones describen que algo pasó, pero no especifican cómo cambió el estado
de la aplicación en respuesta. Esto es trabajo de los reducers.

En Redux, todo el estado de la aplicación es almacenado en un único objeto. Es

una buena idea pensar en su forma antes de escribir código.

Para una aplicación, vamos a querer guardar dos cosas diferentes:

• El filtro de visibilidad actualmente seleccionado;

• La lista actual de tareas.

Se debe tratar de mantener los datos separados del estado de la UI.

Para el manejo de las acciones iniciamos por escribir nuestro reducer. El reducer es
una función pura que toma el estado anterior una acción y retorna el nuevo estado.

(previousState, action) => newState

Se llama reducer porque es el tipo de función que pasarías a la función

Array.Prototype.Reduce(). Es muy importante que los reducer se mantengan puros,
algo que no debe hacer un reducer es modificar argumentos, realizar tareas con
efectos secundarios como llamadas a API o transiciones de rutas. (Abramov, 2015),
(Porcello, 2017)

29
 Figura 19 Declaración de acciones en el reducer

Fuente: Documentación Redux por (Abramov, 2015)

30
Dados los mismos argumentos, se debe calcular y devolver el siguiente estado. Sin
sorpresas. Sin efectos secundarios. Sin llamadas a APIs. Sin mutaciones. Solo
cálculos.

5.4.4 Store

Las acciones que representan los hechos sobre "lo que pasó" y los reductores son
los que actualizan el estado de acuerdo a esas acciones.

El Store es el objeto que los reúne. El store tiene las siguientes responsabilidades:

• Contiene el estado de la aplicación;

• Permite el acceso al estado vía getState();
• Permite que el estado sea actualizado vía dispatch(action);
• Registra los listeners vía subscribe(listener);
• Maneja la anulación del registro de los listeners vía el retorno de la función
de subscribe (listener).

Figura 20 Ejemplo de uso de acciones

Fuente: Documentación Redux por (Abramov, 2015)

31
Sólo se tiene un store en una aplicación Redux. Cuando desees dividir la lógica para
el manejo de datos, usarás composición de reductores en lugar de muchos stores.
Es fácil crear una store si tienes un reductor.

Hablando del flujo de los datos la arquitectura Redux gira en torno a un flujo de
datos estrictamente unidireccional.

Esto significa que todos los datos de una aplicación siguen el mismo patrón de ciclo
de duración, haciendo que la lógica de la aplicación sea más predecible y más fácil
de entender. También fomenta la normalización de los datos, de modo que no
termines con múltiples copias independientes de la misma data sin que se entere
una de la otra.

El ciclo de duración de la data en aplicaciones Redux sigue 4 pasos.

5.4.4.1 La llamada al Store.dispatch(action)

Se puede llamar al store.distpatch(action) de cualquier lugar en la app, incluyendo

componentes con llamadas asíncronas.

5.4.4.2 El store invoca la función reducer que se le indica

El store pasará dos argumentos al reductor: el árbol de estado actual y la acción.

Figura 21 Ejecución de cambio de estado

32
 Fuente: Documentación Redux por (Abramov, 2015)

El reductor es una función pura. Sólo evalúa el siguiente estado. Debe ser
completamente predecible: invocarla con las mismas entradas muchas veces debe
producir las mismas salidas. No debe realizar ningún efecto alterno como las
llamadas al API o las transiciones del router. Esto debe suceder antes de que se
envíe la acción.

5.4.4.3 El reductor raíz puede combinar la salida de múltiples reductores en

un único árbol de estado.

Redux provee una función combineReducers() que ayuda, a "dividir" el reductor raíz
en funciones separadas donde cada una maneja una porción del árbol de estado.

El combineReducers es una función que básicamente combina las funciones que le

mandamos como parámetros.

Figura 22 Combinación de reducers en la función combineReducer

Fuente: Documentación Redux por (Abramov, 2015)

5.4.4.4 El store en Redux guarda por completo el árbol de estado devuelto por
el reductor raíz.

Este árbol registra cada listener usando store.subscribe(listener) y puede ahora ser
invocado, los listeners se pueden invocar con store.getState() para obtener el
estado actual.

33
Una vez recuperado el nuevo estado la UI se puede actualizar para reflejar este
nuevo estado, en Redux para cambiar ese estado se usa.

Component.setState(newState) (Abramov, 2015)

6 La relación Redux y React

Redux al ser una librería que refleja el uso de FLUX en cualquier aplicación no
depende de React, se pueden escribir aplicaciones con React, Angular, Ember,
jquery o vanilla JS, Redux a pesar de ser versátil funciona especialmente bien con
React. En React hay componentes contenedores y de presentacion. Normalmente
se usan los componentes contenedores de React para conectarlos al store que es
manejado por Redux, donde el componente intermedio Provider hace visible al store
para el componente contenedor sin pasar el store explícitamente.

6.1 Componentes de Presentación y contenedores

El uso de React y Redux recurre a la idea de separación de la capa de presentación

y la capa de componentes contenedores.

La mayoría de los componentes que se escriben son de presentación, pero se

recurre al uso de componentes contenedores para conectarlos al store que es
manejado por Redux.

Se debe tener cuidado que un componente no se vuelva demasiado complejo, un

componente se vuelve muy complejo si tiene componentes de presentación
fuertemente anidados con innumerables devoluciones de llamadas que se pasan
hacia el árbol de componentes, se pueden escribir los componentes contenedores
manualmente usando store.subscribe, básicamente subscribimos un componente,
de forma similar al patrón observer. (Abramov, 2015)

6.2 Jerarquía de componentes

La jerarquía de componentes implementa las distintas capaz de componentes que

interactuaran en la app, definiendo los principales como los componentes de

34
presentación, y los componentes contenedores, también se puede incluir una capa
extra de otros componentes.

6.2.1 Componentes de presentación

Los componentes de presentación generalmente se refieren a los componentes que

trabajan de forma directa a los usuarios, de forma funcional se pueden definir los
siguientes componentes de presentación.

• Lista de modelos, según el tipo de modelo que estamos procesando o

trabajando este componente se encarga de listarlos y mostrarlos.
• Creación y Edición, este componente se encargará de relacionar las
tareas de mutación y de recolección de datos
• App es el componente raíz que presenta y engloba a los demás
componentes

Cada componente describe una apariencia, pero no conoce de donde vienen los
datos, o como cambiarlos directamente. Estos componentes solo muestran o
recogen lo que se les da. (Abramov, 2015)

6.2.2 Componentes contenedores

Estos componentes se encargarán de conectar los componentes de presentación,

por ejemplo, el componente de presentación de lista de modelos necesita otro
componente que se subscriba al store de Redux para recuperar y enviar la lista de
modelos, si necesitáramos implementar una función de filtro se debería implementar
en este componente. (Abramov, 2015)

• Componente de “listaDeModelos”
• Componente de filtrado de modelos

6.2.3 Otros componentes

Generalmente estos componentes no tienen una clasificación clara, no sabemos si

de presentación o si es un componente contenedor, un ejemplo claro son los
botones de Crear/Editar que deben manejar un botón en la vista y a la vez manejar
un evento “onClick” que llamara a una funcionalidad para actualizar el estado, en
35
general si el componente es pequeño como este está bien mesclar la capa de
presentación y contenedor.

6.2.4 Incluyendo el Store

Todos los componentes necesitan acceder al sotre de Redux y para este propósito
ellos pueden subscribirse a este, una opción es pasar el store como una propiedad
a cada componente contenedor, este suele ser el método más largo. (Abramov,
2015)

La documentación de Redux recomienda usar un componente llamado <Provider>

este componente intermedio hace visible al store para el componente contenedor
sin pasar el store explícitamente. (Muñoz, 2017)

7 Acciones Asíncronas

Una llamada asíncrona es una llamada hacia una función o método que ejecuta en
un hilo su funcionalidad, generalmente se usan las funciones asíncronas en
llamadas a funciones en el lado del backend, es decir para la conexión a un end-
point. Como react solo maneja flujos síncronos se utilizan Middlewares asíncronos
como redux-thunk o redux-promise que envuelven el método dispatch() y permiten
despachar otras cosas además de acciones, por ejemplo funciones o promesas. El
middleware Thunk es un orquestador de acciones en Redux.

En las llamadas asíncronas hay dos momentos cruciales en la ejecución, el

momento en que se inicia la llamada y el momento en que se obtiene una respuesta
(generalmente viene después de un tiempo de espera).

En cada uno de estos momentos suele requerir un cambio en el estado de la

aplicación, para este propósito es necesario enviar acciones normales que serán
procesadas de forma síncrona por los reductores. (Abramov, 2015)

Mencionaremos tres tipos principales de acciones:

• Una acción que informa a los reductores que la solicitud comenzó, los
reductores pueden manejar esta acción alternando un indicador

36
 “isFetching” por ejemplo, de esta manera la interfaz sabrá cuando es el
momento de iniciar un indicador, un spinner por ejemplo.
• Una acción que informa a los reductores que la solicitud finalizo
correctamente, los reductores pueden responder a esta acción
fusionando los nuevos datos y reestableciendo la variable “isFetching”, de
esta manera la UI sabrá qué acciones tomar.
• Una acción que informe a los reductores que la llamada fallo, de manera
similar a la anterior los reductores usaran esta acción para actualizar el
“isFetching” pero sin modificar el data de la app. (Abramov, 2015)

7.1 El state shape

Las aplicaciones suelen mostrar listas de cosas, generalmente de clases modelos,

cuando la app maneja estos datos por separado en el estado, así de esta manera
se pueden almacenar en cache y recuperar cada modelo individual si es necesario.

Un ejemplo de una lista de modelos puede lucir así:

Figura 23 Ejemplo de un modelo de datos

Fuente: Documentación Redux por (Abramov, 2015)

37
En el ejemplo podemos visualizar la lista ítems que es una lista de modelos, cada
modelo define su id y su title, cada objeto modelo se defina por separado, cuando
el usuario cambie entre ellos la actualización será instantánea y no será necesario
una llamada fetch, o al servidor nuevamente, a menos que nuestra lógica asi lo
necesite. No es necesario preocuparse por los datos en memoria, el único momento
en que se debe pensar de este es si la app tiene miles de miles de objetos modelo
y que el usuario rara vez cierre la pestaña.

Como vemos en el ejemplo “figura 23” podemos notar además el uso de otras
variables que ayudan en la ejecución, isFetching, didInvaldiate, lastUpdated, los
ítems como tal, además podemos pensar en el uso de otras variables por ejemplo,
fetchedPageCount y nextPageUrl, estos para manejar el estado actual de la página
en ejecución.

7.2 Manejando Acciones

Se inician construyendo reductores para las acciones declaradas, y se deben incluir

dos partes importantes.

La sintaxis de propiedad conmutada, en ES6 para poder actualizar el state, que luce
de la siguiente forma.

Return Object.aasign({}, state,{

[action.modelo]:posts(state[action,modelo])

})

Ese código gestiona el estado de una lista de modelos, a partir de acá se elige como
dividir el reductor para delegar elementos de actualización dentro de un objeto
Redux.

7.3 Creando Acciones Asíncronas

Ya definidas nuestras acciones síncronas, que interactuaran con los componentes,

iniciamos la construcción o la integración de nuestro middleware Redux, viene con
un paquete por separado llamado redux-thunk, para el uso de este middleware

38
debemos entender que un creador de acciones puede devolver una función en lugar
de un objeto para que de esta manera el creador de acciones se convierte en un
thunk.

Cuando el creador de acciones retorne una función, esta función será ejecutada por
Redux-Thunk, esta función no es necesariamente una función pura, entonces
posiblemente tendremos efectos secundarios y de cambio, además de llamadas
asíncronas al API. En resumen, Thunk middleware es un orquestador de acciones
en Redux. (Abramov, 2015)

Ademas de Thunk existen otras maneras de orquestar acciones:

• Redux-promises-middleware es un ejemplo de otro orquestador

• Redux-observables retornara observables en lugar de acciones.
• Redux-saga para poder crear acciones asíncronas más complejas
• Redux-pack para acciones asíncronas basadas en promesas
• Se puede incluso construir un custom middleware para el manejo a la API

7.4 Flujo Asíncrono

Sin middlewares, Redux sólo soporta flujos de datos síncronos. Es lo que obtienes
por defecto con createStore().

La función createStore() se mejora con applyMiddleware(). No es necesario, pero

permite usar acciones asíncronas de forma más fácil.

Middlewares asíncronos como redux-thunk o redux-promise envuelven el método

dispatch() y permiten despachar otras cosas además de acciones, por ejemplo
funciones o promesas. Cualquier middleware que uses entonces interpreta
cualquier cosa que despaches, y entonces, pueden pasar acciones al siguiente
middleware de la cadena. Por ejemplo, un middleware de promesas puede
interceptar cualquier promesa y despachar acciones asíncronas en respuesta a
estas. (Muñoz, 2017)

39
Cuando el último middleware de la cadena despache una acción, tiene que ser un
objeto plano. Acá es cómo el flujo de datos síncrono de Redux toma lugar.
(Abramov, 2015)

7.5 Middleware

Los middleware son un software de conectividad que consiste en un conjunto de

servicios que permiten interactuar a múltiples procesos que se ejecutan en distintas
maquinas a través de una red, son simples de usar y proveen una forma fácil de
trabajo a los desarrolladores. (Porcello, 2017)

El middleware es un código que se ejecuta entre el framework que recibe una

solicitud, y el framework que genera una respuesta. Por ejemplo, a través de los
middleware Express o Koa puede agregar encabezados CORS, realizar registro de
eventos, compresión y más. La mejor característica de un middleware es que se
puede ejecutar en cadena. Puedes utilizar múltiples middleware independientes de
terceros en un solo proyecto. (Abramov, 2015)

El mecanismo de middleware en Redux resuelve diferentes problemas cuando lo

comparamos con los middleware en Express o Koa, pero se comporta de manera
conceptualmente similar. Proporciona un punto de extensión para terceros entre el
envío de una acción y el momento en que alcanza el reductor. La gente utiliza Redux
middleware para el registro de eventos, informes de fallos, para mantener las
llamadas a una API asíncrona, enrutamiento y más. (Abramov, 2015)

8 Conclusiones

• Flux es un conjunto de patrones que juntos definen una arquitectura que nos
ayuda en el manejo de lo que se conoce como estado o state de los datos en
la vista, también está compuesto por 3 grandes partes Dispatchers, Stores y
Actions. Flux es una arquitectura unidireccional de flujo de dato, por este
motivo al comportarse de forma unidireccional en el manejo de componentes
hace casi imposible el generar un bug en el manejo de los datos, Flux controla
que la dirección de los componentes no pueda causar un problema al
momento del manejo de los datos
40
• React js junto con Redux son librerías que facilitan el manejo de las vistas
que permiten manejar eventos, estilos crear interfaces de usuarios
agradables para el usuario, además de facilitar para el desarrollador el
escribir código e implementar funcionalidad, se maneja de forma similar a
cualquier proyecto o framework estructurado bajo el principio de javascript,
en cualquier versión ES5 o ES6.
• Para implementar aplicaciones con React y Redux es necesario tener un
ambiente con Node.js, luego instalar react y react cli para poder crear
proyectos preconfigurados y funcionales mediante linea de comandos, que
tienen una estructura estandar de proyectos Node. Luego se debe instalar
redux mediante npm. Para usar redux se deben crear las acciones, creadores
de acciones, reductores, el store o almacen y los despachadores.
• Redux al ser una librería que refleja el uso de FLUX en cualquier aplicación
no depende de React, se pueden escribir aplicaciones con React, Angular,
Ember, jquery o vanilla JS, Redux a pesar de ser versátil funciona
especialmente bien con React. En React hay componentes contenedores y
de presentacion. Normalmente se usan los componentes contenedores de
React para conectarlos al store que es manejado por Redux, donde el
componente intermedio Provider hace visible al store para el componente
contenedor sin pasar el store explícitamente.
• Una llamada asíncrona es una llamada hacia una función o método que
ejecuta en un hilo su funcionalidad, generalmente se usan las funciones
asíncronas en llamadas a funciones en el lado del backend, es decir para la
conexión a un end-point. Como React solo maneja flujos síncronos se utilizan
Middlewares asíncronos como redux-thunk o redux-promise que envuelven
el método dispatch() y permiten despachar otras cosas además de acciones,
por ejemplo funciones o promesas. El middleware Thunk es un orquestador
de acciones en Redux.

41
Bibliografía

Abramov, D. (2015). Redux documentations. Hassan ali, ProSymbols.

Alvarez, M. A. (02 de Marzo de 2018). Que es Redux. Obtenido de

https://desarrolloweb.com/articulos/que-es-redux.html

Boduch, A. (2016). Arquitectura Flux. Birmingham: Packt Publishing Ltd.

Caules, C. A. (2019). Desarrollo Web con React.

Fogus, M. (2013). Functional JavaScript. O'Reilly Media.

Joyent, I. (2012). https://nodejs.org/en/. Obtenido de https://nodejs.org/en/

Muñoz, M. C. (2017). Desarrollo de aplicaciones frontned con arquitectura Redux.

Valencia: Universidad de Valencia.

Porcello, A. B. (2017). Learning React. Gravenstein: O'Really Media.

Xalambri, S. D. (2018). Desarrollo de Aplicaciones con React.js y Redux.js. Buenos

Aires: sdx.im.

42