Mengelola state di Angular bisa dengan Signals, Services, atau NgRx.
Signal-based Store
@Injectable({ providedIn: "root" })
export class CartStore {
private items = signal<CartItem[]>([])
readonly cartItems = this.items.asReadonly()
readonly total = computed(() =>
this.items().reduce((sum, item) => sum + item.price, 0)
)
addItem(item: CartItem) {
this.items.update(items => [...items, item])
}
removeItem(id: number) {
this.items.update(items => items.filter(i => i.id !== id))
}
}
Di Komponen
export class CartComponent {
private store = inject(CartStore)
items = this.store.cartItems
total = this.store.total
}
Signal-based store adalah pendekatan modern — lebih sederhana dari NgRx untuk kebanyakan kasus.
Kapan Pakai Apa?
Tidak ada satu jawaban benar — pilih sesuai skala state:
| Skala | Pilihan | Kapan |
|---|---|---|
| Sangat lokal (1 komponen) | Signal di komponen | State yang tidak dipakai komponen lain. Cukup count = signal(0) di class. |
| Cross-komponen kecil | Signal-based service (@Injectable) |
2-5 komponen butuh share state. Pakai pola di atas (CartStore). |
| Async + complex flow | Service + RxJS | Banyak side effect, debouncing, race condition. Service return Observable. |
| Skala enterprise | NgRx (Redux pattern) | Banyak action, time-travel debugging, audit log, tim besar. |
💡 Default mulai dengan Signals. Naikkan ke service+RxJS kalau butuh async lebih kompleks. Pakai NgRx hanya kalau benefit-nya jelas (audit, time travel) — jangan pakai karena "kelihatan profesional".
