Immutable.js лякає. Ось як розпочати.

Ви чуєте, що вам слід використовувати Immutable. Ви знаєте, що повинні, але не зовсім впевнені, чому. І коли ви переходите до документів, перший фрагмент коду виглядає так:

identity(value: T): T

Ти думаєш: Ні ... можливо інший раз.

Отже, ось простий і швидкий вступ, який допоможе вам розпочати роботу із програмою незмінні. Ви не пошкодуєте:

У Pilcro ми впровадили Immutable у наші програми приблизно 12 місяців тому. Це було одне з найкращих рішень, яке ми прийняли. Наші програми тепер набагато читабельніші, надійніші, без помилок та передбачувані.

Основи

Перетворення в незмінні

У звичайному JavaScript ми знаємо два поширені типи даних: Object{} та Array[] .

Щоб перевести їх у незмінні:

  • Об'єкт {}стає MapMap({})
  • Масив[] стає ListList([])

Щоб перетворити звичайний JavaScript у незмінний, ми можемо використовувати функції Map , List або fromJS, які надає Immutable :

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);

fromJSє корисною функцією, яка перетворює вкладені дані у незмінні. Це створює Mapsі Listsпід час перетворення.

Перетворення з незмінного на звичайний JavaScript

Повернути ваші дані з незмінного до простого старого JavaScript дуже просто. Ви просто викликаєте .toJS()метод для вашого незмінного об'єкта.

import { Map } from 'immutable';
const immutablePerson = Map({ name: 'Will' });const person = immutablePerson.toJS();
console.log(person); // prints { name: 'Will' };
Основне: Структури даних слід розглядати як ПРОСТИЙ JavaScript АБО незмінні.

Почніть використовувати незмінні

Перш ніж пояснити, чому Immutable так корисний, ось три простих приклади того, як Immutable може допомогти вам відразу.

1. Отримання вкладеного значення від об’єкта без перевірки, чи існує воно

Спочатку в звичайному JavaScript:

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'

А тепер у незмінній:

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

У наведених вище прикладах звичайний код JavaScript видає помилку, тоді як незмінний - ні.

Це тому, що ми використовуємо getIn()функцію для отримання вкладеного значення. Якщо шлях до ключа не існує (тобто об’єкт не структурований, як ви думали), він повертається невизначеним, а не видає помилку.

Вам не потрібно перевіряти невизначені значення до кінця вкладеної структури, як це було б у звичайному JavaScript:

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

Ця проста функція робить ваш код набагато читабельнішим, менш багатослівним і набагато надійнішим.

2. Ланцюгові маніпуляції

Спочатку в звичайному JavaScript:

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

Тепер у незмінній:

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'];

Оскільки List.push()повертає результат операції, ми можемо “прив’язати” наступну операцію прямо до неї. У звичайному JavaScript pushфункція повертає довжину нового масиву.

This is a very simple example of chaining, but it illustrates the real power of Immutable.

This frees you up to do all sorts of data manipulation in a manner that is more functional and more concise.

Keynote: Operations on an Immutable object return the result of the operation.

3. Immutable data

It’s called Immutable after all, so we need to talk about why this is important!

Let’s say you create an Immutable object and you update it — with Immutable, the initial data structure is not changed. It is immutable. (lower case here!)

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.