Day 26：SignalStore 與 Strategy Pattern，透過 DI 動態切換業務邏輯

const finalTotal = computed(() => {
  const total = store.total();

  if (memberType() === 'vip') {
    return total * 0.9;
  }

  if (memberType() === 'business') {
    return total * 0.85;
  }

  return total;
});

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

export interface DiscountStrategy {
  calculate(total: number): number;
}

@Injectable({ providedIn: 'root' })
export class NormalDiscount implements DiscountStrategy {
  calculate(total: number) {
    return total;
  }
}

@Injectable({ providedIn: 'root' })
export class VipDiscount implements DiscountStrategy {
  calculate(total: number) {
    return total * 0.9;
  }
}

@Injectable({ providedIn: 'root' })
export class BusinessDiscount implements DiscountStrategy {
  calculate(total: number) {
    return total * 0.85;
  }
}

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

import {
  NormalDiscount,
  VipDiscount,
  BusinessDiscount
} from './discount.strategy';

import type { DiscountStrategy } from './discount.strategy';

export type MemberType = 'normal' | 'vip' | 'business';

@Injectable({ providedIn: 'root' })
export class DiscountService implements DiscountStrategy {
  readonly memberType = signal<MemberType>('normal');

  private readonly strategies = {
    normal: inject(NormalDiscount),
    vip: inject(VipDiscount),
    business: inject(BusinessDiscount)
  };

  calculate(total: number) {
    return this.strategies[
      this.memberType()
    ].calculate(total);
  }

  change(type: MemberType) {
    this.memberType.set(type);
  }
}

import { InjectionToken } from '@angular/core';
import type { DiscountStrategy } from './discount.strategy';

export const DISCOUNT_STRATEGY =
  new InjectionToken<DiscountStrategy>('DISCOUNT_STRATEGY');

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';

import { routes } from './app.routes';
import { DISCOUNT_STRATEGY } from './cart/discount.token';
import { DiscountService } from './cart/discount.service';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    {
      provide: DISCOUNT_STRATEGY,
      useExisting: DiscountService
    }
  ]
};

import { computed, inject } from '@angular/core';
import {
  signalStore,
  withState,
  withComputed,
  withMethods,
  patchState
} from '@ngrx/signals';

import type { CartItem, Product } from './cart.types';
import { DISCOUNT_STRATEGY } from './discount.token';

export const NgRxCartStore = signalStore(
  { providedIn: 'root' },

  withState({
    items: [] as CartItem[]
  }),

  withComputed(({ items }) => {
    const discount = inject(DISCOUNT_STRATEGY);

    const count = computed(() =>
      items().reduce(
        (sum, item) => sum + item.quantity,
        0
      )
    );

    const total = computed(() =>
      items().reduce(
        (sum, item) => sum + item.price * item.quantity,
        0
      )
    );

    const finalTotal = computed(() =>
      discount.calculate(total())
    );

    return { count, total, finalTotal };
  }),

  withMethods(store => ({
    add(product: Product) {
      patchState(store, state => {
        const existing = state.items.find(
          item => item.id === product.id
        );

        const items = existing
          ? state.items.map(item =>
              item.id === product.id
                ? { ...item, quantity: item.quantity + 1 }
                : item
            )
          : [...state.items, { ...product, quantity: 1 }];

        return { items };
      });
    },

    remove(id: number) {
      patchState(store, state => ({
        items: state.items.filter(item => item.id !== id)
      }));
    },

    clear() {
      patchState(store, { items: [] });
    }
  }))
);

const discount = inject(DISCOUNT_STRATEGY);

const finalTotal = computed(() =>
  discount.calculate(total())
);

import { Component, inject } from '@angular/core';

import { NgRxCartStore } from './ngrx-cart.store';
import { DiscountService } from './discount.service';
import type { MemberType } from './discount.service';

@Component({
  selector: 'app-root',
  template: `
    <main style="padding: 24px; max-width: 600px;">
      <h1>Strategy Pattern 購物車</h1>

      <h3>商品列表</h3>

      <button (click)="store.add({
        id: 1,
        name: '鍵盤',
        price: 1200
      })">
        加入鍵盤 $1200
      </button>

      <button (click)="store.add({
        id: 2,
        name: '滑鼠',
        price: 800
      })">
        加入滑鼠 $800
      </button>

      <hr />

      <h3>會員類型</h3>

      <select
        [value]="discount.memberType()"
        (change)="changeMember($event)"
      >
        <option value="normal">一般會員</option>
        <option value="vip">VIP 會員</option>
        <option value="business">企業會員</option>
      </select>

      <hr />

      <h3>購物車</h3>

      @for (item of store.items(); track item.id) {
        <p>
          {{ item.name }} × {{ item.quantity }}
          = {{ item.price * item.quantity }} 元

          <button (click)="store.remove(item.id)">
            移除
          </button>
        </p>
      } @empty {
        <p>購物車目前沒有商品</p>
      }

      <hr />

      <p>商品數量：{{ store.count() }}</p>
      <p>原價：{{ store.total() }} 元</p>
      <h2>折扣後：{{ store.finalTotal() }} 元</h2>

      <button (click)="store.clear()">
        清空購物車
      </button>
    </main>
  `
})
export class CartComponent {
  readonly store = inject(NgRxCartStore);
  readonly discount = inject(DiscountService);

  changeMember(event: Event) {
    const select = event.target as HTMLSelectElement;
    this.discount.change(select.value as MemberType);
  }
}

const finalTotal = computed(() =>
  discount.calculate(total())
);

calculate(total: number) {
  return this.strategies[
    this.memberType()
  ].calculate(total);
}