Immutable.js запугивает. Вот как начать.

Автор оригинала: FreeCodeCamp Community Member.

Уильям Вудлс

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

identity(value: T): T

Думаешь: Нах … Может быть, в другой раз.

Итак, вот простое и быстрое введение, чтобы вы начали с неизменными. Вы не пожалеете об этом:

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

Основы

Преобразование в неизменно

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

Перевести их в неизменно:

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

Чтобы преобразовать нормальный JavaScript в неизменно, мы можем использовать карта , Список, или Prejs Функции, которые неизменны предоставляют:

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

Prejs это полезная функция, которая преобразует вложенные данные в неизменную. Это создает Карта и Списки в конверсии.

Преобразование от неизменных до нормального JavaScript

Очень просто получить ваши данные от неизменной к простым старым JavaScript. Вы просто называете .tojs. () Метод на вашем неизменном объекте.

import { Map } from 'immutable';

const immutablePerson = Map({ name: 'Will' });const person = immutablePerson.toJS();

console.log(person); // prints { name: 'Will' };

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

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

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

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

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

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

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

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'

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

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

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

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

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

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

Надежные манипулирования данными

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

Краткий читаемый код

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

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

Кривая обучения неоспоримо хитрым с неизменными, но на самом деле стоит того. Начните просто играть в игру.

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

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

Удачи!

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

Оригинал: “https://www.freecodecamp.org/news/immutable-js-is-intimidating-heres-how-to-get-started-2db1770466d6/”