Leseproben
Manfred Steyer Selbstständig

„Sofern die Komplexität der Anwendung den Einsatz von NgRx Data rechtfertigt, kann es die Entwicklungsarbeit erheblich vereinfachen. Erfahrungsgemäß ist eine solche Komplexität u.a. dann gegeben, wenn mehrere Komponenten auf dieselben abgerufenen Daten zugreifen müssen.“

Die Bibliothek NgRx Data ist nun ein integraler Bestandteil von NgRx. Sie vereinfacht die Umsetzung von CRUD-Szenarien auf der Basis von Redux mit einigen generischen Services und einer auf NgRx aufbauenden Architektur.

„Kunst ist schön, macht aber Arbeit“. Dieses Zitat, das oftmals Karl Valentin zugeschrieben wird, lässt sich wunderbar auf das populäre Redux-Muster beziehen. „Schön“ bedeutet hier, dass Redux eine klare Architektur vorgibt, die Inkonsistenzen, Redundanzen und zyklische Datenflüsse vermeidet. Die Arbeit kommt jedoch mit vielen Indirektionen und Building Blocks, die das Entwicklungsteam erstellen und warten muss.

Die Bibliothek NgRx Data versucht, diese Nachteile zu kompensieren – zumindest für CRUD-Szenarien. Seit Version 8 ist sie Bestandteil von NgRx, der De-facto-Implementierung von Redux in der Angular-Welt.

In diesem Artikel gehe ich auf die Grundlagen dieser sehr jungen Bibliothek ein. Das dabei verwendete Beispiel findet sich wie immer in meinem GitHub-Account.

Redux – eine kurze Wiederholung

Um zu verhindern, dass eine SPA den Anwendungszustand über die gesamte Anwendung verstreut, sieht das Redux-Muster einen zentralen Store vor. Diese einzige Quelle der Wahrheit (Single Source of Truth) verhindert Redundanzen, die im Laufe der Zeit zu Inkonsistenzen führen können (Abb. 1). Dieser Store lässt sich mit einer In-Memory-Datenbank, die den Zustand verwaltet, vergleichen.

Abb. 1: Konzeptionelle Sicht auf das Redux-Muster

Abb. 1: Konzeptionelle Sicht auf das Redux-Muster

Jede Komponente erhält lesenden Zugriff auf sämtliche Einträge, die der Store in einem Zustandsbaum, also einem hierarchisch organisierten Objektgraphen, verwaltet. Zum Schreiben müssen die Komponenten jedoch Aktionen an den Store senden, die der Store an registrierte Reducer weiterleitet. Diese nebeneffektfreien Funktionen verändern den Zustand in einer wohldefinierten Art und Weise.

Auch wenn sich ein Reducer jeweils nur für bestimmte Aktionen interessiert, kann er prinzipiell auf alle Aktionen reagieren. Diese Art der Ereignisbehandlung verhindert Zyklen, da sich nun die einzelnen Reducer nicht gegenseitig benachrichtigen müssen.

NgRx, der De-facto-Standard für die Umsetzung von Redux in der Angular-Welt, sieht daneben auch noch sogenannte Effects vor. In diese lagert die Anwendung Seiteneffekte wie Serverzugriffe aus. NgRx aktiviert diese Effects aufgrund definierter Aktionen. Nachdem ein Effect abgearbeitet wurde, sendet er eine neue Aktion mit dem Ergebnis zurück zum Store.

Den vollständigen Artikel lesen Sie in der Ausgabe:

Windows Developer 9.19 - "Software zwischen Mensch und Maschine"

Alle Infos zum Heft
579901345Mit NgRx Data CRUD-Aufgaben in Angular automatisieren
X
- Gib Deinen Standort ein -
- or -