4

Introducción a colecciones inmutables con ImmutableJS

1868Puntos

hace 5 años

ImmutableJS es una librería que nos permite manejar diferentes colecciones y agregarles cualidades inmutables. Fue creada por Facebook en 2013 y se complementa a la perfección con ReactJS y la arquitectura Flux por la forma en que estos trabajan con estados y propiedades.

¿Qué es un objeto inmutable?

Un objeto inmutable es básicamente aquel que luego de ser creado nunca cambia. En Javascript los objetos son mutables por defecto. Ejemplo: [js] const persona = { nombre: 'Jeison', apellido: 'Higuita', }; console.log(persona); //Object {nombre: "Jeison", apellido: "Higuita"} const persona2 = persona; persona2.edad = 22; ​ console.log(persona2); //Object {nombre: "Jeison", apellido: "Higuita", edad: 22} console.log(persona); //Object {nombre: "Jeison", apellido: "Higuita", edad: 22} [/js] Como vemos, al hacer un cambio en un objeto (persona2) se cambia la referencia(persona). Trabajar con objetos inmutables nos trae beneficios como:
  • Cuando se está trabajando con múltiples hilos o procesos asíncronos no debemos de preocuparnos por el estado ya que éste nunca cambiará
  • Manejo más natural de colecciones Maps y Set
  • Evita el conflicto entre objetos
  • Los cambios en tus datos son más explícitos
  • Permite escribir búsquedas o otros algoritmos de manejo de datos de manera más simple
Además de eso, trabajar con ImmutableJS como tal, nos trae ventajas como:
  • Implementar colecciones optimizadas para Javascript
  • Interacción con objetos definidos del API de Javascript
  • Trabajas con colecciones anidadas

¿Cómo usar Immutable?

Para usar Inmutable primero debemos instalarlo con npm: [js] npm i immutable -D import Immutable from 'immutable'; ​ const persona = Immutable.Map({nombre: 'Jeison', apellido: 'Higuita'}); console.log(persona,toJS()); //Object {nombre: "Jeison", apellido: "Higuita"} const persona2 = persona.set('apellido','Sanchez'); console.log(persona2.toJS()); //Object {nombre: "Jeison", apellido: "Sanchez"} console.log(personato.JS()); //Object {nombre: "Jeison", apellido: "Higuita"} [/js] Como vemos, al crear el nuevo objeto(persona2) el objeto de referencia no cambia(persona).

Colecciones de Immutable

Immutable cuenta con diversas colecciones. Entre las más útiles están:

Maps

Un mapa es básicamente un objeto que consiste en pares clave/valor: [js] const persona = Immutable.Map({ nombre: 'Jeison', apellido: 'HIguita' }); ​ //Metodos //set() const persona2 = persona1.set('apellido','Sanchez'); //get() console.log(persona2.get('apellido')); //delete() const persona3 = persona2.delete('apellido'); //merge() const persona4 = persona1.merge(persona2); // persona4 = Object {nombre: "Jeison", apellido: "Sanchez"} const persona5 = persona2.merge(persona1); // persona4 = Object {nombre: "Jeison", apellido: "Higuita"} ​[/js] También cuenta con métodos como mergeDeep mergeWith que nos facilitan la vida tanto para las iteraciones como para trabajar con colecciones anidadas. MergeDeep básicamente nos permite acceder a colecciones dentro de nuestras colecciones y obtener y modificar datos. [js] //mergeDeep const mapa = Immutable.fromJS({a: { x: 10, y: 10 }, b: { x: 20, y: 50 } }); const mapa2 = Immutable.fromJS({a: { x: 2 }, b: { y: 5 }, c: { z: 3 } }); mapa.mergeDeep(mapa2) // {a: { x: 2, y: 10 }, b: { x: 20, y: 5 }, c: { z: 3 } } [/js] MergeWith nos permite no sólo hacer merge de 2 mapas, sino que nos retorna un objeto iterable. [js] //mergewith const mapa = Immutable.Map({a: 10, b: 20, c: 30}); const mapa2 = Immutable.Map({b: 40, a: 50, d: 60}); mapa.mergeWith((prev, next) => prev / next, mapa2) // { a: 0.2, b: 0.5, c: 30, d: 60 } mapa2.mergeWith((prev, next) => prev / next, mapa) // { b: 2, a: 5, d: 60, c: 30 } [/js] Puedes consultar los métodos mencionados anteriormente y mas métodos del API de Immutable en su documentación.

List

Es la representación de un array en JavaScript. Sin embargo, cuando éste es alterado, el origen nunca cambia. Así como Map, esta colección también cuenta con métodos para colecciones anidadas. [js] const qwerty = Immutable.List(['q','w','e','r','t','y']); const qwerty.size// 6 //push const qwertyu = qwerty.push( 'u' ); //pop const qwert = qwertyu.pop().pop(); //shift const wertArray = qwert.shift().toJSON();// ["w", "e", "r", "t"] //concat const qwertyuiArray = qwert.concat( 'y', 'u', 'i' ).toJS();// ["q", "w", "e", "r", "t", "y", "u", "i"] [/js]

Set

La colección Set es un array que no permite valores repetidos. [js] const set = Immutable.Set([11,2,4,5,4,8]); console.log(set.toJS()); //[11, 2, 4, 5, 8] const set2 = Immutable.Set([22,2,8,7]); console.log(set2.toJS()); //union() console.log(set.union(set2).toJS()) //[11, 2, 4, 5, 8, 22, 7] //intersect() console.log(set.intersect(set2).toJS()) //[8, 2] //subtract() console.log(set.subtract(set2).toJS()) //[11, 5, 4] [/js] Immutable cuenta con muchas más colecciones que te pueden ser de utilidad a la hora de manejar tus datos de manera eficiente. Si quieres aprender más al respecto, no te pierdas la clase que daré hoy en #PlatziComunidad.Manejo de Datos con ImmutableJS
Jeison
Jeison
json

1868Puntos

hace 5 años

Todas sus entradas
Escribe tu comentario
+ 2
1
2180Puntos

Excelente tutorial. ¡Gracias!
Por algún motivo tu código de Javascript no está bien formateado en este tutorial, por lo que es muy difícil de leer y le baja un poco la calidad final a tu gran aporte.
Saludos.