Khi nào Angular app cần NgRx, Signal Store hoặc state management library?

Không phải Angular app nào cũng cần global state library. Local component state nên dùng signals; server stream/cache có thể giữ Observable trong service; feature state vừa phải có thể dùng service/store tự viết.

Pattern store nhỏ bằng signal:

typescript

@Injectable({ providedIn: "root" })
export class CartStore {
  private readonly _items = signal<CartItem[]>([])
  readonly items = this._items.asReadonly()
  readonly total = computed(() => this._items().reduce((sum, item) => sum + item.price, 0))
}

Cân nhắc NgRx/Signal Store khi state dùng chung nhiều route, mutation phức tạp, cần devtools/time travel, effect orchestration hoặc convention mạnh cho team lớn.

Not every Angular app needs a global state library. Local component state should use signals; server streams/cache can stay as Observables in a service; moderate feature state can use a small hand-written service/store.

Small signal store pattern:

typescript

@Injectable({ providedIn: "root" })
export class CartStore {
  private readonly _items = signal<CartItem[]>([])
  readonly items = this._items.asReadonly()
  readonly total = computed(() => this._items().reduce((sum, item) => sum + item.price, 0))
}

Consider NgRx/Signal Store when state is shared across many routes, mutations are complex, devtools/time travel matter, effects need orchestration, or a large team needs strong conventions.

Xem toàn bộ Angular cùng filter theo level & chủ đề con.

Mở danh sách Angular

Pattern store nhỏ bằng signal:

typescript

@Injectable({ providedIn: "root" })
export class CartStore {
  private readonly _items = signal<CartItem[]>([])
  readonly items = this._items.asReadonly()
  readonly total = computed(() => this._items().reduce((sum, item) => sum + item.price, 0))
}

Cân nhắc NgRx/Signal Store khi state dùng chung nhiều route, mutation phức tạp, cần devtools/time travel, effect orchestration hoặc convention mạnh cho team lớn.

Small signal store pattern:

typescript

@Injectable({ providedIn: "root" })
export class CartStore {
  private readonly _items = signal<CartItem[]>([])
  readonly items = this._items.asReadonly()
  readonly total = computed(() => this._items().reduce((sum, item) => sum + item.price, 0))
}

Consider NgRx/Signal Store when state is shared across many routes, mutations are complex, devtools/time travel matter, effects need orchestration, or a large team needs strong conventions.