Immutable.js es intimidante. Aquí le mostramos cómo empezar.

Escuchaste que deberías usar Immutable. Sabe que debería hacerlo, pero no está muy seguro de por qué. Y cuando vas a los documentos, el primer fragmento de código se ve así:

identity(value: T): T

Piensas: Nah ... tal vez en otro momento.

Entonces, aquí hay una introducción simple y rápida para comenzar con Immutable. No te arrepentirás:

En Pilcro, introdujimos Immutable en nuestras aplicaciones hace unos 12 meses. Ha sido una de las mejores decisiones que hemos tomado. Nuestras aplicaciones ahora son mucho más legibles, sólidas, libres de errores y predecibles.

Los basicos

Convertirse en inmutable

En JavaScript normal, conocemos dos tipos de datos comunes: Object{} y Array[] .

Para traducir esto en inmutable:

  • Objeto {}se convierte en mapaMap({})
  • Array se[] convierte en ListList([])

Para convertir JavaScript normal en Immutable, podemos usar las funciones Map , List o fromJS que Immutable proporciona:

import { Map, List, fromJS } from 'immutable';
// Normal Javascript
const person = { name: 'Will', pets: ['cat', 'dog']};
// To create the equivalent in Immutable:
const immutablePerson = Map({ name: 'Will', pets: List(['cat', 'dog'])});
// Or ...
const immutablePerson = fromJS(person);

fromJSes una función útil que convierte datos anidados en inmutables. Crea Mapsy Listsen la conversión.

Conversión de JavaScript inmutable a normal

Es muy sencillo recuperar sus datos de Immutable a JavaScript antiguo. Simplemente llame al .toJS()método en su objeto inmutable.

import { Map } from 'immutable';
const immutablePerson = Map({ name: 'Will' });const person = immutablePerson.toJS();
console.log(person); // prints { name: 'Will' };
Nota clave: Las estructuras de datos deben considerarse YA sea como JavaScript simple O inmutable.

Comience a usar Immutable

Antes de explicar por qué Immutable es tan útil, aquí hay tres ejemplos simples de dónde Immutable puede ayudarlo de inmediato.

1. Obtener un valor anidado de un objeto sin verificar si existe

Primero en JavaScript normal:

const data = { my: { nested: { name: 'Will' } } };
const goodName = data.my.nested.name;console.log(goodName); // prints Will
const badName = data.my.lovely.name;// throws error: 'Cannot read name of undefined'

Y ahora en Immutable:

const data = fromJS({ my: { nested: { name: 'Will' } } });
const goodName = data.getIn(['my', 'nested', 'name']);console.log(goodName); // prints Will
const badName = data.getIn(['my', 'lovely', 'name']);console.log(badName); // prints undefined - no error thrown

En los ejemplos anteriores, el código JavaScript normal arroja un error, mientras que el Inmutable no.

Esto se debe a que usamos la getIn()función para obtener un valor anidado. Si la ruta de la clave no existe (es decir, el objeto no está estructurado como pensaba), devuelve undefined en lugar de generar un error.

No es necesario buscar valores indefinidos en toda la estructura anidada como lo haría en JavaScript normal:

if (data && data.my && data.my.nested && data.my.nested.name) { ...

Esta sencilla función hace que su código sea mucho más legible, con menos palabras y mucho más sólido.

2. Encadenamiento de manipulaciones

Primero en JavaScript normal:

const pets = ['cat', 'dog'];pets.push('goldfish');pets.push('tortoise');console.log(pets); // prints ['cat', 'dog', 'goldfish', 'tortoise'];

Ahora en inmutable:

const pets = List(['cat', 'dog']);const finalPets = pets.push('goldfish').push('tortoise');
console.log(pets.toJS()); // prints ['cat', 'dog'];
console.log(finalPets.toJS());// prints ['cat', 'dog', 'goldfish', 'tortoise'];

Debido a que List.push()devuelve el resultado de la operación, podemos "encadenar" la siguiente operación directamente en él. En JavaScript normal, la pushfunción devuelve la longitud de la nueva matriz.

Este es un ejemplo muy simple de encadenamiento, pero ilustra el poder real de Immutable.

Esto le permite realizar todo tipo de manipulación de datos de una manera más funcional y concisa.

Nota clave: las operaciones en un objeto inmutable devuelven el resultado de la operación.

3. Datos inmutables

Después de todo, se llama Inmutable, ¡así que necesitamos hablar sobre por qué esto es importante!

Digamos que crea un objeto inmutable y lo actualiza; con Immutable, la estructura de datos inicial no cambia. Es inmutable. (¡minúsculas aquí!)

const data = fromJS({ name: 'Will' });const newNameData = data.set('name', 'Susie');
console.log(data.get('name')); // prints 'Will'console.log(newNameData.get('name')); // prints 'Susie'

In this example we can see how the original “data” object is not changed. This means that you will not get any unpredictable behaviour when you update the name to “Susie.”

This simple feature is really powerful, particularly when you are building complex applications. It is the backbone of what Immutable is all about.

Keynote: Operations on an Immutable object do not change the object, but instead create a new object.

Why Immutable is useful

The developers at Facebook sum up the benefits on the homepage of the docs, but it’s quite tricky to read. Here is my take on why you should start using Immutable:

Your data structures change predictably

Because your data structures are immutable, you are in charge of how your data structures are operated upon. In complex web applications, this means you don’t get funny re-rendering issues when you change a bit of data that is being accessed for the UI.

Robust data manipulation

By using Immutable to manipulate data structures, your manipulations themselves are much less error-prone. Immutable does a lot of the hard work for you — it catches errors, offers default values, and builds nested data structures out-of-the-box.

Concise readable code

The functional design of Immutable can be confusing at first, but once you get used to it, function chaining makes your code much shorter and more readable. This is great for teams working on the same code base.

Next steps

The learning curve is undeniably tricky with Immutable, but really worth it. Get started just having a play around.

Here are the keynotes that were noted as we went through. If you can keep these in your mind, you will take to Immutable like a duck to water!

  1. Data structures should be thought of as EITHER plain JavaScript OR Immutable.
  2. Operations on an Immutable object return the result of the operation.
  3. Operations on an Immutable object do not change the object itself, but instead create a new object.

Good luck!

If you liked this story, please ? and please share with others. Also please check out my company pilcro.com. Pilcro is brand software for G-Suite — for marketers and brand agencies.