Angular Academy · Урок

Иммутабельное обновление состояния

Применяйте иммутабельные обновления состояния сигналов

«Иммутабельное обновление состояния» — бесплатный урок Angular Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Зачем нужна неизменяемость

Сигналы обнаруживают изменения по ссылке. Если изменить массив или объект на месте, ссылка останется прежней, и зависимые сигналы computed() могут не пересчитаться. Всегда создавайте новую ссылку.

Ловушка мутации

Добавление элемента в существующий массив изменяет его, не меняя ссылку. Избегайте этого.

// BAD: mutates in place, reference unchanged
this._items.update(list => { list.push(item); return list; });

Spread для массивов

Создавайте новый массив с помощью оператора spread, чтобы ссылка изменилась и потребители выполнились повторно.

// GOOD: new array reference
this._items.update(list => [...list, item]);

Удаление элементов

Используйте filter(), который возвращает совершенно новый массив, оставляя исходный без изменений.

removeItem(id: string) {
  this._items.update(list => list.filter(i => i.id !== id));
}

Обновление одного элемента

Используйте map(), чтобы вернуть новый массив, распространив свойства найденного объекта в свежую копию и изменив тем самым также внутреннюю ссылку.

markDone(id: string) {
  this._items.update(list =>
    list.map(i => i.id === id ? { ...i, done: true } : i));
}

Spread для объектов

Для состояния-объекта скопируйте предыдущий объект с помощью spread и переопределите изменившиеся поля. Для вложенных объектов также нужен собственный spread.

private _profile = signal({ name: '', address: { city: '' } });

setCity(city: string) {
  this._profile.update(p => ({ ...p, address: { ...p.address, city } }));
}

set с новым значением

При полной замене состояния set() с новым объектом естественным образом сохраняет неизменяемость, поскольку Вы передаёте новую ссылку.

reset() {
  this._profile.set({ name: '', address: { city: '' } });
}

Почему от этого зависит computed

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

Вспомогательные шаблоны

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

const upsert = (list: Item[], item: Item) =>
  list.some(i => i.id === item.id)
    ? list.map(i => i.id === item.id ? item : i)
    : [...list, item];

save(item: Item) { this._items.update(l => upsert(l, item)); }

Осторожно с глубокой вложенностью

Глубоко вложенное состояние требует множества операций spread. Если обновления становятся неудобными, упростите структуру состояния или разделите её на несколько сигналов, чтобы каждое обновление затрагивало небольшую часть.

Неизменяемость упрощает отладку

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

Быстрая проверка

Проверьте, насколько хорошо Вы усвоили неизменяемые обновления сигналов.

Итоги

Вы изучили шаблоны неизменяемого обновления: spread для массивов и объектов, map/filter для изменения и удаления элементов, создание новых ссылок с помощью set, а также то, почему равенство ссылок делает неизменяемость необходимой для корректной реактивности.

Часто задаваемые вопросы

Урок «Иммутабельное обновление состояния» бесплатный?

Да — полный текст урока «Иммутабельное обновление состояния» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Иммутабельное обновление состояния»?

Применяйте иммутабельные обновления состояния сигналов Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Иммутабельное обновление состояния»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Angular Academy