When to Use State Management?

Without a Library (Signals/Services)

✅ Use when:

• Small/medium project
• State is mostly local in components
• Simple sharing between a few components
• Team is new to Angular

1// Simple service with Signals
2@Injectable({ providedIn: 'root' })
3export class CartService {
4  private items = signal<CartItem[]>([]);
5  readonly cartItems = this.items.asReadonly();
6  readonly total = computed(() =>
7    this.items().reduce((sum, item) => sum + item.price, 0)
8  );
9
10  addItem(item: CartItem): void {
11    this.items.update(items => [...items, item]);
12  }
13}

NgRx SignalStore

✅ Use when:

• Medium project with growing complexity
• You want to leverage Signals
• You need structure, but not full Redux
• You prefer a functional approach

Classic NgRx

✅ Use when:

• Large, complex project
• Many data sources and side effects
• You need DevTools for debugging
• Team experienced with Redux/NgRx

Summary

| Solution | Complexity | Boilerplate | DevTools | Signals | |----------|-----------|-------------|----------|---------| | Services + Signals | Low | Minimal | No | Yes | | SignalStore | Medium | Small | Yes | Yes | | NgRx Store | High | Large | Yes | No* |

*NgRx has selectSignal() for integration

1// NgRx with Signals
2@Component({...})
3export class MyComponent {
4  private store = inject(Store);
5
6  // Observable → Signal
7  samurai = this.store.selectSignal(selectAllSamurai);
8  loading = this.store.selectSignal(selectLoading);
9}