Уильям Вудхед

Вы слышите, что вам следует использовать Immutable. Вы знаете, что должны, но вы не совсем уверены, почему. И когда вы переходите к документам, первый фрагмент кода выглядит так:

identity<T>(value: T): T

Вы думаете: «Нет… возможно, в другой раз».

Итак, вот простое и быстрое вступление, чтобы начать работу с Immutable. Вы не пожалеете:

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

Основы

Превращение в неизменный

В обычном JavaScript мы знаем два типовых типа данных: Объект {} и Массив [].

Чтобы перевести их в неизменные:

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

Чтобы превратить обычный JavaScript в неизменный, мы можем использовать Карта, Список, или от JS функции, которые обеспечивает 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 в конверсии.

Превращение из 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() функция получения вложенного значения. Если путь к ключу не существует (т.е. объект структурирован не так, как вы думали), он возвращает значение undefined, а не выдает ошибку.

Вам не нужно проверять неопределенные значения по всей вложенной структуре, как в обычном 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 функция возвращает длину нового массива.

Это очень простой пример цепочки, но он иллюстрирует настоящую силу Immutable.

Это освобождает вас от выполнения любых манипуляций с данными более функциональным и сжатым способом.

Ключевая информация: операции над неизменным объектом возвращают результат операции.

3. Неизменные данные

В конце концов это называется Immutable, поэтому нам нужно поговорить о том, почему это важно!

Скажем, вы создаете объект Immutable и обновляете его – с Immutable начальная структура данных не меняется. Это неизменно. (здесь нижний регистр!)

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'

В этом примере мы видим, как оригинальный объект «данных» не меняется. Это значит, что у вас не будет непредсказуемого поведения, когда вы обновите имя на Сьюзи.

Эта простая функция действительно мощная, особенно когда вы создаете сложные программы. Это основание того, что такое Immutable.

Keynote: Операции над постоянным объектом не изменяют объект, а создают новый объект.

Почему Immutable полезен

Разработчики из Facebook суммируют преимущества на домашней странице документов, но это достаточно сложно читать. Вот мой взгляд на то, почему вы должны начать использовать Immutable:

Ваши структуры данных изменяются предсказуемо

Поскольку ваши структуры данных неизменны, вы отвечаете за то, как работать с вашими структурами данных. В сложных веб-приложениях это означает, что вы не получите забавных проблем с повторным воспроизведением при изменении части данных, к которым осуществляется доступ к пользовательскому интерфейсу.

Надежная манипуляция данными

Используя Immutable для манипулирования структурами данных, сами ваши манипуляции гораздо менее подвержены ошибкам. Immutable выполняет много тяжелой работы за вас – он обнаруживает ошибки, предлагает значение по умолчанию и создает вложенные структуры данных из коробки.

Лаконичный читабельный код

Функциональный дизайн Immutable сначала может смутить, но как только вы привыкнете к нему, цепочка функций делает ваш код гораздо более коротким и более читабельным. Это отлично для команд, работающих над одинаковой кодовой базой.

Следующие шаги

Кривая учеба, несомненно, сложна с Immutable, но она того стоит. Начните просто играть.

Вот ключевые моменты, которые мы упомянули при прохождении. Если вы сможете запомнить это, вы приметеся к Immutable, как утка к воде!

1. Структуры данных следует рассматривать как обычный JavaScript ИЛИ как неизменные.
2. Операции над постоянным объектом возвращают итог операции.
3. Операции над постоянным объектом не изменяют сам объект, а создают новый объект.

Удачи!

Если вам понравилась эта история, пожалуйста? и поделитесь пожалуйста с другими. Также посмотрите мою компанию pilcro.com. Pilcro – это фирменное программное обеспечение для G-Suite – для маркетологов и бренд-агентств.