Immutable.js е плашещ. Ето как да започнете.

Чувате, че трябва да използвате Immutable. Знаете, че трябва, но не сте съвсем сигурни защо. И когато отидете в документите, първият фрагмент от код изглежда така:

identity(value: T): T

Вие си мислите: Не ... може би друг път.

И така, ето просто и бързо въведение, за да започнете с Immutable. Няма да съжалявате:

В Pilcro въведохме Immutable в нашите приложения преди около 12 месеца. Това беше едно от най-добрите решения, които взехме. Нашите приложения вече са много по-четливи, здрави, без грешки и предсказуеми.

Основите

Преобразуване в Immutable

В нормалния JavaScript ние познаваме два често срещани типа данни: Object{} и Array[] .

За да ги преведете в Immutable:

  • Обект {}става КартаMap({})
  • Масивът[] става СписъкList([])

За да конвертираме нормален JavaScript в Immutable, можем да използваме функциите 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е полезна функция, която преобразува вложени данни в Immutable. Той създава Mapsи Listsв преобразуването.

Преобразуване от Immutable в нормален JavaScript

Много е лесно да върнете данните си от Immutable в обикновен стар JavaScript. Просто извиквате .toJS()метода на вашия неизменяем обект.

import { Map } from 'immutable';
const immutablePerson = Map({ name: 'Will' });const person = immutablePerson.toJS();
console.log(person); // prints { name: 'Will' };
Основно: Структурите на данните трябва да се разглеждат като ИЛИ обикновен JavaScript ИЛИ Неизменяем.

Започнете да използвате Immutable

Преди да обясните защо 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'

И сега в 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

В горните примери нормалният код на 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'];

Сега в Immutable:

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.