🚀 SignalStore Advanced – Feature Stores auf dem nächsten Level

SignalStore ist nicht nur ein nicer Wrapper – es ist das neue Zentrum für modularen, skalierbaren State in Angular.

In diesem Beitrag zeige ich dir:

• Wie du SignalStore sinnvoll aufsetzt
• Welche Patterns du in großen Projekten brauchst
• Und warum es eine echte Alternative zu NgRx sein kann

🔧 Was ist ein Feature Store?

Ein Feature Store verwaltet den lokalen State für eine konkrete Funktionseinheit (z. B. „Benutzer bearbeiten“, „Produkte anzeigen“).

Mit SignalStore bekommst du:

• 🧠 Lesbare Struktur
• 💡 Echtzeit-Reaktivität
• ⚡ Performance ohne Overhead

🧱 Beispiel: UserFormStore

export function createUserFormStore() {
  const name = signal('');
  const email = signal('');

  const isValid = computed(() => name().length > 1 && email().includes('@'));

  return {
    name,
    email,
    isValid,
    setName: (v: string) => name.set(v),
    setEmail: (v: string) => email.set(v),
  };
}

➡ Reaktiv, testbar, klar – keine Klassen, keine Decorators

🧩 Integration in die Component

@Component({
  standalone: true,
  template: `
    <input [value]="store.name()" (input)="store.setName($any($event.target).value)" />
    <input [value]="store.email()" (input)="store.setEmail($any($event.target).value)" />
    <button [disabled]="!store.isValid()">Speichern</button>
  `
})
export class UserFormComponent {
  store = createUserFormStore();
}

➡ Pure Reaktivität – kein ChangeDetectorRef, keine Subscriptions

💡 Advanced Pattern: SignalStore + API

export function createProductStore(productApi: ProductApiService) {
  const products = signal<Product[]>([]);
  const isLoading = signal(false);

  const load = async () => {
    isLoading.set(true);
    const data = await firstValueFrom(productApi.getAll());
    products.set(data);
    isLoading.set(false);
  };

  return { products, isLoading, load };
}

➡ Du kannst Services reinreichen – perfekt für DI ohne Injectable

🛠 Tipps aus der Praxis

• Nutze readonly für Public Access
• Pack die Logik ins Store-Factory, nicht in die Component
• Teile State nach Use Cases – nicht nach Tabellen!

⚠️ Don'ts

• ❌ Kein globaler Store für alles – Features isolieren!
• ❌ Kein inline signal() in Components – Store zentral halten!
• ❌ Nicht mischen mit ViewChild + Signals ohne Konzept

✅ Fazit

SignalStore bringt:

• ✅ Modulare Architektur
• ✅ Reaktiven State ohne RxJS-Komplexität
• ✅ Einfachheit auf einem neuen Level

Wenn du Angular 18+ nutzt – SignalStore ist die Zukunft.

📍 Bald im Blog: 📐 Component Architecture in Angular – Patterns für skalierbare Komponenten