AngularJS con Redux

Ldmarz
Ldmarz
Aug 31, 2018 · 3 min read

Epale, ¿Cómo estás?. Hoy aprenderemos a utilizar Redux en aplicaciones con AngularJS.

Veamos qué es lo que vamos a construir

¿Por qué usar Redux?

Redux, se define asi mismo como un “contenedor de estado predecible para aplicaciones JavaScript”. Esto en términos más coloquiales es que todo el estado de nuestra aplicación estarán en un solo sitio y no lo tendremos regado en diferentes componentes como suele suceder en AngularJS

Uno de los grandes problemas que me he topado en mi experiencia desarrollando aplicaciones Angular es la comunicación entre componentes. Esto debido a que el flujo normal de una aplicación implica que un componente quiere un estado, éste utiliza cierto servicio para traer la información desde backend y este se encarga de administrar esta información

El problema viene cuando varios componentes necesitan tener acceso al mismo estado y para esto Redux es perfecto ya que todos los componentes tendrán que solicitar o actualizar el estado utilizando Redux, convirtiéndolo en nuestra única fuente de la verdad.

Store, Reducers y actions.

Antes de continuar es necesario que entendamos algunos conceptos de Redux.

  • Store: Esta es como nuestra pequeña “ base de datos “ en el explorador, aqui tendremos almacenados todos los estados de nuestra aplicación. mas info
  • Reducers: Son funciones que definen como cambiará nuestro estado, es decir ellos reciben el estado actual de la aplicacion y una accion que el usuario quiere ejecutar, estas se encargaran de actualizar el estado segun estos parametros. mas info
  • Actions: Para poder activar un reducer lo haremos a travez de una accion valida, normalmente un componente que quiera actualizar el store deberá disparar una accion que llamará un reducer y este finalmente actualizará el estado. mas info

Requerimientos

Creando nuestro primer Store

Por supuesto lo primero que tenemos que hacer es definir nuestro store. Esto lo podemos hacer en el config de nuestra aplicación utilizando en el $ngReduxProvider.

Adicionalmente estamos utilizando el método combineReducersque nos permitirá combinar varios reducers esto será especialmente util cuando nuestra aplicación vaya creciendo.

Creando los Reducers

Ahora vamos a crear los reducers que nos permitirán actualizar nuestro estado. Aquí también podremos definir un estado inicial para este estado

Como podemos notar los reducers no son mas que funciones que dependiendo la acción que se este manejando actualizaran el estado de la aplicación y luego retornaran esos cambios.

Creando las acciones

Las acciones son muchísimo mas simples, solo deberán identificar acciones validas que de fondo ejecutaran el reducer correspondiente.

Creando las constantes

Por comodidad yo suelo guardar los actions typeen un archivo de constantes para compartirlos de una manera mucho mas estándar entre todos los archivos (Reducers, actions, component...).

Utilizando nuestro Redux en un componente.

Ahora si, por esto es que vinimos a este post… ¿Como utilizamos redux dentro del ecosistema de Angularjs?

  • Lo primero será decirle a nuestro componente que se subscriba a NgRedux para que este nos mantenga actualizado el scope de nuestro componente (This) con la sección del state que le compete a este componente.

Ya con esto nuestro componente tendrá actualizada la información del state en la posición listReducer. Basta con hacer un console.log(this) dentro de la mapStateToThis.

  • Ahora solo debemos anclar nuestros métodos para que cuando el usuario interactúe con la aplicación el componente sea capaz de actualizar el estado.

Conclusiones

Con esto nuestra aplicación tendrá el estado actualizado en todo momento, sin tener necesidad de usar técnicas todas raras como Broadcast, Emit $watcher y estrategias de este estilo que sobre todo al crecer la aplicación se hacen muy difíciles de mantener.

Si otro componente necesita alguna información, basta con que bindeemos ese componente al key del store que le compete y listo.

Si te gustó este post no olvides seguirme en las redes sociales, Saludos!!


Originally published at Ldmarz blog.

Ldmarz

Written by

Ldmarz

Software Developer, Mostly Web Technologies @ Facebook: https://www.facebook.com/ldmarzBlog/ @ Twitter: @ldmarz

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade