© SkillUp/Shutterstock.com
Mit NgRx Data CRUD-Aufgaben in Angular automatisieren

Redux für CRUD?


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 [1].

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. 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.

steyer_ngrxdata_1.tif_fmt1.jpgAbb. 1: Konzeptionelle Sicht auf das Redux-Muster

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 [2], 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.

Auch wenn diese Vorgehensweise eine klare Architektur mit sich bringt und Zyklen, Redundanzen und Inkonsistenzen vermeidet, ist sie nicht ganz einfach umzusetzen. Zum einen liegt das an den vielen Indirektionen, die dieser Ansatz mit sich bringt, zum anderen an den vielen Building Blocks wie Actions und Reducers, die Entwickler hierfür umsetzen müssen.

Die Bibliothek NgRx Data, die seit der kürzlich erschienenen Version 8 ein integraler Bestandteil von NgRx ist, schafft hier Abhilfe, indem sie generische Varianten der Building Blocks für CRUD-Szenarien anbietet.

NgRx Data – Building Blocks

NgRx Data baut auf den Building Blocks von NgRx auf und ergänzt sie um für CRUD-Szenarien spezialisierte Ausprägungen:

  • EntityAction: Action, die einzelne CRUD-Operationen repräsentiert; hierzu verweist sie auch auf den jeweiligen Entitätstyp; Beispiele dafür sind query-all, um sämtliche Daten abzurufen, oder add-one, um einen einzelnen neuen Eintrag hinzuzufügen

  • EntityCache: Mit EntityCache bezeichnet NgRx Data den verwendeten Teil des Zustandsbaumes

  • EntityCollection: Eintrag im EntityCache, der alle lokal vorl...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang