Lab 15: Refactorisation du Panier avec Signals

📖 Ressources

• Documentation Signals
• Gestion d'État avec Signals

🚀 Code de Départ

step-15-album-wholesale-v21-post-signal-computed

Dans ce lab, vous allez refactoriser votre service de panier d'achat en passant des observables aux signals. Vous remplacerez la propriété panier simple par signal(), utiliserez update() pour des changements d'état immuables, et implémenterez des signals computed pour les totaux du panier.

📝 Instructions

Étape 1: Créer un Panier Basé sur les Signals

Remplacez le panier basé sur les observables par des signals:

@Injectable({ providedIn: 'root' })
export class CartService {
  // Signal modifiable privé
  private cart = signal<Album[]>([]);

  // Computed public
  cartItems = computed(() => this.cart());

  add(album: Album) {
    this.cart.update(items => [...items, album]);
  }

  remove(albumId: number) {
    this.cart.update(items => items.filter(item => item.id !== albumId));
  }
}

Étape 2: Utiliser Computed pour l'État Dérivé

Créez des signals computed pour les totaux:

export class CartComponent {
  cartService = inject(CartService);

  totalItems = computed(() => this.cartService.cartItems().length);

  totalPrice = computed(() =>
    this.cartService.cartItems().reduce((sum, item) => sum + item.price, 0)
  );
}

Étape 3: Mettre à Jour le Panier avec l'Immuabilité

Utilisez update() pour des mises à jour immuables:

// Ajouter un élément
this.cart.update(items => [...items, newItem]);

// Retirer un élément
this.cart.update(items => items.filter(item => item.id !== id));

// Mettre à jour un élément
this.cart.update(items =>
  items.map(item => item.id === id ? { ...item, quantity: item.quantity + 1 } : item)
);