У постійному розвитку світі веб-розробки Angular представляє новий реактивний примітив під назвою сигнали, який спрощує управління станом і робить реактивне програмування більш інтуїтивно зрозумілим. Цей посібник надає огляд сигналів, їхніх основних концепцій та практичних застосувань, що покращують ваш досвід розробки в Angular.
У першій частині ми детально розглянемо нюанси сигналів.
Що таке сигнали?
Сигнал — це особливий тип змінної, яка зберігає значення і сповіщає підписників про зміни цього значення. На відміну від традиційних змінних, сигнали є:
- Реактивними: автоматично поширюють зміни на залежні обчислення.
- Завжди мають значення: сигнали зберігають синхронний і консистентний стан.
- Легкими: це не заміна для RxJS та обсервабель, а простіша альтернатива для конкретних випадків.
Можна уявити сигнал як змінну з механізмом сповіщення про зміни.
Давайте подивимося на приклад.
Ось я створив компонент слайдера, де користувач може переміщувати повзунок, щоб збільшити кількість ліцензій, і відповідно буде обчислено новий загальний обсяг. Ви помітите, що тут є два сигнали: “noOfLicenses” та “maxPricePerUser” разом із обчисленим сигналом “maxTotalPayable”.
Приклад сигналів разом з обчисленим сигналом
Обчислені сигнали
Похідна реактивність
Сигнали можуть отримувати свої значення з інших сигналів, створюючи обчислені сигнали. Коли вихідний сигнал оновлюється, всі залежні обчислені сигнали оновлюються автоматично. Це надає елегантний, декларативний спосіб роботи з похідними станами.
- API обчислення працює, приймаючи один або кілька вихідних сигналів і створюючи новий сигнал.
- Коли вихідний сигнал змінюється (у нашому випадку це maxTotalPayable або totalPayable сигнал), обчислений сигнал totalSavings оновлюється негайно.
Приклади обчислених сигналів.
Чи потрібно підписуватися на сигнал?
Немає потреби в ручних підписках.
Немає потреби в ручних підписках! Сигнали та обчислені сигнали автоматично відстежують залежності:
- Коли обчислювальна функція викликається вперше, Angular визначає залежності на основі використаних сигналів.
- Подальші зміни вихідних сигналів спричиняють автоматичне оновлення обчисленого сигналу.
Це усуває необхідність у шаблонних підписках, роблячи ваш код чистішим і легшим для обслуговування.
Angular знає, що існує залежність між сигналами maxTotalPayable, totalPayable та totalSavings.
Що, якщо нам потрібно зчитати значення сигналу з обчисленого сигналу без створення залежності?
Використовуйте untracked. Давайте подивимося на приклад:
Ми не хочемо відстежувати зміни, що викликаються сигналом “maxPricePerUser”
API ефекту: Реакція на зміни сигналу
Хоча обчислені сигнали обробляють похідні стани, API ефекту дозволяє виконувати побічні ефекти, коли сигнал змінюється.
Приклади побічних ефектів:
- Логування значень
- Зберігання значень сигналів у
localStorage - Синхронізація даних з базою даних
Ось приклад, де ми виводимо користувача з додатку, якщо його електронна пошта не підтверджена, використовуючи API ефекту.
Загальні проблеми з API ефекту:
Помилка NG0600: Запис у сигнали за замовчуванням не дозволено в обчисленому чи ефекті.
Однією з найбільш поширених помилок, коли ви починаєте вивчати сигнали, є спроба set значення сигналу в межах ефекту, як показано нижче:
Отже, яке рішення?
По-перше, якщо ви зустріли таку ситуацію, варто переглянути дизайн вашого коду. Однак ви можете використати allowSignalWrites.
Помилка NG0203: effect() може бути використаний тільки в контексті ін’єкцій......
Це помилка, з якою ви можете стикатися досить часто, поки не зрозумієте концепцію. Подивіться на приклад нижче, де ми намагаємось використовувати effect всередині ngOnInit, і бум! Отримуємо помилку:
Ви можете легко виправити це, використовуючи будь-який з трьох наведених нижче способів:
Приклади контексту ін’єкцій
Хороша стаття про контекст ін’єкцій.
Механізми очищення
Ви можете використовувати manualCleanup для знищення своїх ефектів.
Використання "manualCleanup"
Angular також надає утиліти, такі як onCleanup для управління ресурсами. Ви можете використовувати це, коли потрібно зробити наступне:
- Відписатися від обсервабель
- Очистити
setTimeoutабоsetInterval - Закрити мережеві з'єднання
Використання "onCleanup"
Хороша стаття про знищення ефектів
Angular активно розширює можливості сигналів, з такими новими функціями, як:
- Моделі вводу на основі сигналів
- Запити сигналів
- Нове API виводу
Ці можливості прокладають шлях до глибшої інтеграції сигналів в Angular-додатках.
Нове API output імітує введення сигналу, але важливо зазначити, що воно не засноване на сигналах. Приклад використання:
Приклад використання нового API виводу
За подібною схемою можна використовувати API viewChild та viewChildren.
Використання “viewChild” та “viewChildren”
Чи є варіанти для автоматичного досягнення цієї міграції?
Якщо ви хочете впровадити сигнали в існуючі проекти, Angular надає міграційні схематики, щоб спростити перехід.
Після успішної міграції ви зможете скористатися реактивністю сигналів, зменшуючи складність традиційних технік управління станом.
Ось список офіційних міграційних схем:
А відчуття після успішної міграції нічим не гірше:
Ми вже багато чого дізналися, давайте подивимось на фрагмент коду нижче, як ви вважаєте, чи правильний він, чи є у нього вплив на продуктивність?
https://www.linkedin.com/posts/daniel-glejzner-271281159angular-activity-7249407983103733762-I333?utmsource=share&utmmedium=memberdesktop
Відповідь: це абсолютно правильний підхід при використанні сигналів. Ніякого впливу на продуктивність. 🚀
Давайте подивимося, що нового нас чекає.
Функції в режимі попереднього перегляду для розробників
Я додав посилання на офіційну документацію Angular, але якщо ви любите відео, ось два чудових навчальних ресурси від Deborah Kurata:
- Перший погляд на новий linkedSignal() в Angular
- Перший погляд на нові resource() та rxResource() в Angular
Готові побачити демо? Давайте створимо лічильник!
Більше немає демо лічильника
Хочете побачити робочий приклад? 🚀
Перейдіть до Практичного посібника з сигналів — Частина II (час демо)
Сигнали в Angular вводять потужний та інтуїтивно зрозумілий спосіб управління станом і реактивністю. Завдяки використанню обчислених сигналів та API ефектів, розробники можуть писати більш чистий і підтримуваний код без надмірної залежності від зовнішніх бібліотек, таких як RxJS.
Оскільки Angular продовжує розвиватися, сигнали стають основою його моделі реактивного програмування. Почніть експериментувати з сигналами вже сьогодні та відкрийте нові можливості у ваших Angular-додатках!
Якщо вам сподобалося те, що ви дізналися, відзначте це аплодисментами 👏.
Перекладено з: A Pragmatic Guide To Signals — Part I