Alguien me puede explicar para que sirve Immutable.js al usarlo con react js?.

@juandc ¿Todavia se usa esta libreria?

Este tutorial te puede ayudar: https://platzi.com/tutoriales/1642-javascript-profesional/4559-estructuras-de-datos-inmutables/. :wink:

Immutable.js te permite trabajar con colecciones de datos inmutables, como pueden ser listas (básicamente un array) o mapas (estructuras llave-valor como un objeto).

El trabajar con estructuras inmutables te facilita hacer Programación Funcional (que en JS se hace mucho incluso sin darte cuenta) más que usas arrays u objetos, por ejemplo si usas un array y haces uso de Array.prototype.push resulta que este método agrega un nuevo elemento al array y devuelve la posición.

const numbers = [1, 2, 3];

const position = numbers.push(4);

console.debug(position); // 3 (la posición del nuevo valor agregado

console.debug(numbers);  // [1, 2, 3, 4]

Este comportamiento puede causar problemas y hacerte escribir más código si, por ejemplo, querés tener una copia del viejo listado de números. Con Immutable usando la estructura List esto no ocurre.

const numbers = immutable.List([1, 2, 3]);

const newNumbers = numbers.push(4);

console.debug(numbers.toJS());    // [1, 2, 3]    (la lista original sin tocar)

console.debug(newNumbers.toJS()); // [1, 2, 3, 4] (la lista nueva con el valor agregado)

Y si usas colecciones como Map esto se vuelve mucho mejor ya que por ejemplo en JS para iterar un objeto hay que hacerlo con un for...in, con Immutable solo hay que llamar al método forEach o si querés transformar sus valor podés usar map igual que en un array.

const messages = immutable.Map({

  '123': immutable.Map({

    id: 123,

    content: 'hello world',

    date: '2016-06-19',

  }),

  '4576': immutable.Map({

    id: 4576,

    content: 'hola mundo',

    date: '2016-06-21',

  }),

});

const formatedDates = messages.map(message => {

  const date = message.get('date');

  const formated = moment(date).fromNow();

  return message.set('date', formated);

});

console.debug(messages.toJS());     // objeto original sin tocar

console.debug(formatedDates.toJS(); // objeto modificado para tener fechas relativas

Como se ve en el ejemplo podemos iterar usando el método map nuestra estructura llave-valor para transformar una de las propiedades de cada objeto de mensaje, de la misma forma podríamos usar otros métodos como filter para filtrarlos y muchos otros métodos.

Ahora que tiene que ver React.js en todo esto, resulta que en React.js los props se supone que sean inmutables, ya que React.js toma muchas cosas de Programación Funcional, pero es muy común que si usas un array o un objeto como valor de un prop quieras modificarle cosas antes de renderizar el componente, hacer esto modifica el valor original del prop, rompiendo la inmutabilidad, lo que puede causar problemas inesperados.

Si usas Immutable.js esto se soluciona inmediatamente ya que tus props sí serían imutables de verdad y no tendrías este posible problema, además que gracias a todos los métodos para iterar colecciones que agrega

Otra cosa es que en React.js uno normalmente usa arquitecturas como Flux o basadas en esta como Redux, las cuales también proponen trabajar con datos inmutables, en el caso de Redux es parte de como funciona el ser inmutables, así que acá también el usar coleccione de Immutable.js te facilita mucho le trabajo y te hace menos propenso a errores.

Por último, una aclaración, no es obligatorio usar Immutable.js si usas React.js (o Redux), al final del día es posible usar estructuras mutables como arrays y objetos siempre y cuando evites mutarlas, que al final del día es lo que Immutable.js hace internamente.