Vereinfachen Sie Ihren Angular-Code mit NgRx-Entitäten

Im Sommer habe ich meine NgRx-Kenntnisse aufgefrischt, indem ich eine kleine Anwendung für die Verwaltung meiner Lieblingsorte erstellt habe. Während dieses Prozesses hat mir NgRx Spaß gemacht, weil ich echte Kontrolle über den Status meiner App hatte.

Eine Sache, die viel Aufsehen erregte, war die Anzahl der Selektoren und Aktionen, die für CRUD-Operationen definiert werden mussten. In meinem persönlichen Projekt war das kein allzu großer Aufwand, aber als ich eine große Anwendung mit vielen Slices und Abschnitten sowie Selektoren und Reduzierern erstellte, wurde die Wartung des Codes schwieriger.

Zum Beispiel erhöhte das Schreiben von Aktionen für Erfolg, Fehler, Aktualisierung und Löschung sowie Selektoren für jeden Vorgang die Komplexität und erforderte mehr Tests.

Hier kommen NgRx-Entitäten ins Spiel. NgRx-Entitäten reduzieren den Boilerplate-Code, vereinfachen das Testen, verkürzen die Lieferzeiten und sorgen dafür, dass die Codebasis besser wartbar ist. In diesem Artikel führe ich Sie durch die Umgestaltung der Zustandsverwaltung von Orten in meinem Projekt mithilfe von NgRx-Entitäten, um die CRUD-Logik zu vereinfachen.

Was und warum NgRx-Entitäten?

Bevor wir uns mit dem Code befassen, wollen wir zunächst verstehen, was NgRx-Entitäten sind und warum Sie ihre Verwendung in Betracht ziehen sollten.

Was ist @NgRx/Entities?

NgRx Entities ist eine Erweiterung von NgRx, die die Arbeit mit Datensammlungen vereinfacht. Es stellt eine Reihe von Dienstprogrammen bereit, die es einfach machen, Vorgänge wie das Hinzufügen, Aktualisieren und Entfernen von Entitäten aus dem Status sowie die Auswahl von Entitäten aus dem Speicher durchzuführen.

Warum muss ich zu NgRx-Entitäten wechseln?

Beim Erstellen von CRUD-Operationen für Sammlungen kann das manuelle Schreiben von Methoden in den Reduzierer und das Erstellen sich wiederholender Selektoren für jede Operation mühsam und fehleranfällig sein. NgRx Entities entlastet einen Großteil dieser Verantwortung und reduziert die Menge an Code, die Sie schreiben und warten müssen. Durch die Minimierung des Boilerplate-Codes trägt NgRx Entities dazu bei, technische Schulden zu senken und die Zustandsverwaltung in größeren Anwendungen zu vereinfachen.

Wie funktioniert es?

NgRx Entities bietet Tools wie EntityState, EntityAdapter und vordefinierte Selektoren, um die Arbeit mit Sammlungen zu optimieren.

EntityState

Die EntityState-Schnittstelle ist der Kern von NgRx Entities. Es speichert die Sammlung von Entitäten mithilfe von zwei Schlüsseleigenschaften:

• ids: ein Array von Entitäts-IDs.

• Entitäten: ein Wörterbuch, in dem jede Entität anhand ihrer ID gespeichert wird.
  

interface EntityState<V> {
  ids: string[] | number[];
  entities: { [id: string | id: number]: V };
}

Lesen Sie mehr über Entity State

EntityAdapter

Der EntityAdapter wird mit der Funktion „createEntityAdapter“ erstellt. Es bietet viele Hilfsmethoden zum Verwalten von Entitäten im Bundesstaat, z. B. zum Hinzufügen, Aktualisieren und Entfernen von Entitäten. Darüber hinaus können Sie konfigurieren, wie die Entität identifiziert und sortiert wird.

interface EntityState<V> {
  ids: string[] | number[];
  entities: { [id: string | id: number]: V };
}

Mit dem EntityAdapter können Sie auch definieren, wie Entitäten identifiziert werden (selectId) und wie die Sammlung mithilfe des sortComparer sortiert werden soll.

Lesen Sie mehr über EntityAdapter

Da wir nun die Grundlagen verstanden haben, wollen wir sehen, wie wir die Zustandsverwaltung von Orten in unserer Anwendung mithilfe von NgRx-Entitäten

umgestalten können

Setup-Projekt

Klonen Sie zunächst das Repository aus dem vorherigen Artikel und wechseln Sie zu dem Zweig, der über das grundlegende CRUD-Setup verfügt:

export const adapter: EntityAdapter<Place> = createEntityAdapter<Place>();

?Dieser Artikel ist Teil meiner Serie zum Erlernen von NgRx. Wenn Sie mitmachen möchten, schauen Sie es sich bitte an.

https://www.danywalls.com/understanding-when-and-why-to-implement-ngrx-in-angular

https://www.danywalls.com/how-to-debug-ngrx-using-redux-devtools

https://www.danywalls.com/how-to-implement-actioncreationgroup-in-ngrx

https://www.danywalls.com/how-to-use-ngrx-selectors-in-angular

https://danywalls.com/when-to-use-concatmap-mergemap-switchmap-and-exhaustmap-operators-in-building-a-c rud-with-ngrx

https://danywalls.com/handling-router-url-parameters-using-ngrx-router-store

Dieser Zweig enthält das Setup, in dem NgRx bereits installiert ist und MockAPI.io für API-Aufrufe konfiguriert ist.

Unser Ziel ist es, NgRx-Entitäten zu verwenden, um Orte zu verwalten, Aktion umzugestaltenIonen für CRUD-Operationen, zu aktualisieren die Reduzierer, um die Verwendung von Adaptervorgängen wie das Hinzufügen, Aktualisieren und Löschen von Orten zu vereinfachen, Verwenden Sie Selektoren, um die Liste der Orte aus dem Store abzurufen.

Installieren von NgRx-Entitäten

Installieren Sie zunächst die Projektabhängigkeiten mit npm i und fügen Sie dann NgRx-Entitäten mithilfe von Schaltplänen hinzu, indem Sie ng add @ngrx/entity ausführen.

git clone https://github.com/danywalls/start-with-ngrx.git
git checkout crud-ngrx
cd start-with-ngrx

Perfekt, wir sind bereit, mit unserem Refactoring zu beginnen!

Den Staat umgestalten

In der vorherigen Version des Projekts haben wir Arrays und Reduzierer manuell definiert, um den Status zu verwalten. Mit NgRx Entities lassen wir den Adapter die Sammlungslogik für uns verwalten.

Öffnen Sie zunächst „places.state.ts“ und überarbeiten Sie den PlacesState, um ihn von „EntityState“ zu erweitern.

npm i
ng add @ngrx/entity

Als nächstes initialisieren Sie den Entitätsadapter für unsere Place-Entität mit createEntityAdapter:

interface EntityState<V> {
  ids: string[] | number[];
  entities: { [id: string | id: number]: V };
}

Ersetzen Sie abschließend den manuellen initialState durch den vom Adapter bereitgestellten mit getInitialState:

export const adapter: EntityAdapter<Place> = createEntityAdapter<Place>();

Wir haben den Status umgestaltet, um EntityState zu verwenden, und den EntityAdapter initialisiert, um die Liste der Orte automatisch zu verarbeiten.

Lassen Sie uns dazu übergehen, die Aktionen zu aktualisieren, um NgRx-Entitäten zu verwenden.

Refactoring der Aktionen

In den vorherigen Artikeln habe ich Aktualisierungen und Änderungen an Entitäten manuell vorgenommen. Jetzt verwenden wir NgRx Entities, um Teilaktualisierungen mithilfe von Update abzuwickeln.

In „places.actions.ts“ aktualisieren wir die Aktion „Ort aktualisieren“ so, dass sie „Aktualisieren“ verwendet, wodurch wir nur einen Teil einer Entität ändern können:

git clone https://github.com/danywalls/start-with-ngrx.git
git checkout crud-ngrx
cd start-with-ngrx

Perfekt, wir haben die Aktionen aktualisiert, um mit NgRx-Entitäten zu funktionieren, und haben den Update-Typ verwendet, um die Handhabung von Updates zu vereinfachen. Es ist an der Zeit, zu sehen, wie sich dies auf den Reduzierer auswirkt, und ihn umzugestalten, um die Entitätsadaptermethoden für Vorgänge wie das Hinzufügen, Aktualisieren und Entfernen von Orten zu verwenden.

Refactoring des Reduzierers

Der Reduzierer ist der Punkt, an dem NgRx Entities wirklich glänzt. Anstatt manuelle Logik zum Hinzufügen, Aktualisieren und Löschen von Orten zu schreiben, verwenden wir jetzt Methoden, die vom Entity-Adapter bereitgestellt werden.

So können wir den Reduzierer vereinfachen:

npm i
ng add @ngrx/entity

Wir haben Methoden wie addOne, updateOne, removeOne und setAll vom Adapter verwendet, um Entitäten im Status zu verarbeiten.

Weitere nützliche Methoden sind:

• addMany: Fügt mehrere Entitäten hinzu.

• removeMany: Entfernt mehrere Entitäten nach ID.

• upsertOne: Fügt eine Entität basierend auf ihrer Existenz hinzu oder aktualisiert sie.

Lesen Sie mehr über Reduziermethoden im EntityAdapter.

Nachdem der Status, die Aktionen und die Reduzierer umgestaltet wurden, werden wir nun die Selektoren umgestalten, um die vordefinierten Selektoren von NgRx Entities zu nutzen.

Refactoring der Selektoren

NgRx Entities bietet eine Reihe vordefinierter Selektoren, die die Abfrage des Stores erheblich vereinfachen. Ich werde Selektoren wie selectAll, selectEntities und selectIds direkt vom Adapter verwenden.

So gestalten wir die Selektoren in „places.selectors.ts“ um:

export type PlacesState = {
  placeSelected: Place | undefined;
  loading: boolean;
  error: string | undefined;
} & EntityState<Place>;

Diese integrierten Selektoren reduzieren die Notwendigkeit, manuell Selektoren für den Zugriff auf den Status zu erstellen, erheblich.

Nachdem ich die Selektoren so umgestaltet habe, dass sie die vordefinierten verwenden und die Notwendigkeit, meine Selektoren manuell zu definieren, reduziert habe, ist es an der Zeit, unsere Formularkomponenten zu aktualisieren, um diese Änderungen widerzuspiegeln und den neuen Status und die neuen Aktionen zu verwenden.

Aktualisieren der Formularkomponenten

Nachdem wir den Status, die Aktionen und die Reduzierer überarbeitet haben, müssen wir die Formularkomponenten aktualisieren, um diese Änderungen widerzuspiegeln.

Beispielsweise können wir in PlaceFormComponent die Speichermethode aktualisieren, um die Funktion „Update“ zu verwenden. Geben Sie beim Speichern von Änderungen Folgendes ein:

interface EntityState<V> {
  ids: string[] | number[];
  entities: { [id: string | id: number]: V };
}

Wir haben unsere Formularkomponenten aktualisiert, um die neuen Aktionen und den überarbeiteten Status zu verwenden. Lasst uns umziehen und unsere Effekte überprüfen, um sicherzustellen, dass sie korrekt mit NgRx-Entitäten

funktionieren

Refactoring-Effekte

Schließlich werde ich dafür sorgen, dass die Effekte mit NgRx-Entitäten funktionieren. Wir müssen nur PlacesPageActions.updatePlace aktualisieren und das richtige Update übergeben. Objekt im updatePlaceEffect$-Effekt.

export const adapter: EntityAdapter<Place> = createEntityAdapter<Place>();

Fertig! Ich habe festgestellt, dass unsere App mit NgRx-Entitäten funktioniert und die Migration war so einfach! Die Dokumentation der Ngrx-Entität ist sehr hilfreich und

Abschluss

Nachdem ich meinen Code auf NgRx Entities verschoben hatte, hatte ich das Gefühl, dass dies dazu beitrug, die Komplexität und den Boilerplate bei der Arbeit mit Sammlungen zu reduzieren. NgRx-Entitäten vereinfachen die Arbeit mit Sammlungen und Interaktionen mit ihrer großen Anzahl an Methoden für die meisten Szenarien und eliminieren einen Großteil des für CRUD-Vorgänge erforderlichen Boilerplate-Codes.

Ich hoffe, dieser Artikel motiviert Sie, ngrx-entities zu verwenden, wenn Sie mit Sammlungen in ngrx arbeiten müssen.

• Quellcode: https://github.com/danywalls/start-with-ngrx/tree/ngrx-entities

Foto von Yonko Kilasi auf Unsplash

Das obige ist der detaillierte Inhalt vonVereinfachen Sie Ihren Angular-Code mit NgRx-Entitäten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!