Angular Academy · Lekcja

Signal stores w serwisach

Przechowywać stan aplikacji w serwisach opartych na sygnałach

Signal stores w serwisach to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Sygnały jako stan

Sygnały Angulara to reaktywne wartości, które powiadamiają konsumentów o zmianie. Sygnał przechowuje wartość i ponownie uruchamia każde obliczenie lub szablon, który ją odczytuje.

Przechowywanie sygnałów wewnątrz usługi @Injectable umożliwia wielu komponentom współdzielenie tego samego reaktywnego stanu.

Minimalny magazyn sygnałów

Utwórz usługę i przechowuj stan w signal(). Zachowaj sygnał zapisywalny jako prywatny i udostępnij widok tylko do odczytu.

import { Injectable, signal } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class CounterStore {
  private _count = signal(0);
  readonly count = this._count.asReadonly();

  increment() { this._count.update(c => c + 1); }
}

Dlaczego providedIn root

providedIn: 'root' sprawia, że usługa jest singletonem w całej aplikacji. Każdy komponent, który ją wstrzykuje, współdzieli dokładnie tę samą instancję sygnału, dzięki czemu stan pozostaje zsynchronizowany.

Odczytywanie sygnału

Wywołaj sygnał jak funkcję, aby odczytać jego wartość. W szablonie Angular śledzi ten odczyt i automatycznie aktualizuje DOM, gdy wartość się zmieni.

import { Component, inject } from '@angular/core';
import { CounterStore } from './counter.store';

@Component({
  selector: 'app-counter',
  template: '<button (click)="store.increment()">{{ store.count() }}</button>'
})
export class CounterComponent {
  store = inject(CounterStore);
}

asReadonly chroni stan

asReadonly() zwraca sygnał, który można odczytywać, ale nie można go zapisywać. Komponenty nie mogą przypadkowo wywołać na nim set() ani update(), więc wszystkie modyfikacje przechodzą przez metody magazynu.

set a update

Użyj set(value), gdy znasz bezpośrednio następną wartość. Użyj update(fn), gdy następna wartość zależy od bieżącej.

private _user = signal<User | null>(null);

setUser(u: User) { this._user.set(u); }
clearUser() { this._user.set(null); }
touch() { this._user.update(u => u ? { ...u, seen: true } : u); }

Wiele sygnałów w jednym magazynie

Magazyn może przechowywać kilka sygnałów reprezentujących różne fragmenty stanu. Każdy sygnał zapisywalny powinien pozostać prywatny, a na zewnątrz należy udostępnić jego odpowiednik tylko do odczytu.

private _items = signal<Item[]>([]);
private _loading = signal(false);

readonly items = this._items.asReadonly();
readonly loading = this._loading.asReadonly();

Metody hermetyzują logikę

Reguły biznesowe powinny znajdować się w metodach magazynu, a nie w komponentach. Komponenty wywołują metody jasno wyrażające intencję, takie jak addToCart(item), a magazyn decyduje, jak zmienić stan.

addToCart(item: Item) {
  this._items.update(list => [...list, item]);
}
removeFromCart(id: string) {
  this._items.update(list => list.filter(i => i.id !== id));
}

Subskrypcje nie są potrzebne

W przeciwieństwie do usług opartych na RxJS magazyny sygnałów nie wymagają ani subscribe(), ani ręcznego anulowania subskrypcji. Odczyt sygnału w szablonie konfiguruje reaktywność, a Angular sprząta ją po zniszczeniu komponentu.

Wstrzykiwanie za pomocą inject()

Funkcja inject() działa w konstruktorach, inicjalizatorach pól i funkcjach fabrykujących. Jest nowoczesnym sposobem pobierania instancji magazynu.

export class CartComponent {
  private store = inject(CartStore);
  items = this.store.items; // read-only signal
}

Testowanie magazynu sygnałów

Magazyny sygnałów są zwykłymi klasami, dlatego testy są proste: utwórz instancję, wywołaj metodę i synchronicznie odczytaj wartość sygnału. Nie jest potrzebna obsługa asynchroniczności.

it('increments', () => {
  const store = new CounterStore();
  store.increment();
  expect(store.count()).toBe(1);
});

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat magazynów sygnałów.

Podsumowanie

Dowiedzieli się Państwo, jak budować magazyn oparty na sygnałach: przechowywać sygnały zapisywalne jako prywatne, udostępniać widoki asReadonly(), modyfikować stan za pomocą set/update wewnątrz metod oraz wstrzykiwać singleton za pomocą inject(). Bez subskrypcji, z łatwym testowaniem i współdzielonym reaktywnym stanem.

Często zadawane pytania

Czy lekcja „Signal stores w serwisach” jest bezpłatna?

Tak — pełny tekst „Signal stores w serwisach” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Signal stores w serwisach”?

Przechowywać stan aplikacji w serwisach opartych na sygnałach Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Signal stores w serwisach”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?

Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Angular Academy