Dieser Artikel ist eine Fortsetzung des Beitrags „Angular: Eine umfassende Einführung in NGRX“.NGRX-Beispiel
In unserem Beispiel gibt es eine Liste der Benutzer, eine Seite mit Benutzerdetails und einige Informationen zur Erstkonfiguration, die Sie beim Starten der Anwendung erhalten sollten. Wir werden einige wichtige NGRX-Threads implementieren.Aktionsplan:- Bibliotheksinstallation
- Erstellen einer Ordnerstruktur für die Speicherung
- Erstellung von Speicher- und Anfangswerten
- Aktionen erstellen
- Getriebe erstellen (Reduzierstücke)
- Effekte erstellen
- Selektoren erstellen
- Endgültige Einrichtung
- Speicher in Komponenten verwenden
Also machen wir's ...Bibliotheksinstallation
Wir werden Angle Cli verwenden, um das Projekt zu erstellen, und dann werden wir die ngrx-Bibliotheken hinzufügen.Erstellen Sie ein Projekt:ng new angular-ngrx --style=scss
Fügen Sie die erforderlichen NGRX-Bibliotheken hinzu:npm install @ngrx/core @ngrx/store @ngrx/effects @ngrx/store-devtools @ngrx/router-store --save
Wir installieren fast alle ngrx-Ökosystembibliotheken. Die meisten von ihnen beschreiben ihren Zweck ganz klar: Kern, Speicher, Effekte, aber es gibt ein paar, für die Sie sich vielleicht fragen, warum sie benötigt werden?- store-devtools - Ein leistungsstarkes Debugging-Tool.
- Router-Store - Speichert den Status des eckigen Routers im Speicher.
Ordnerstruktur zur Speicherung
Beginnen wir mit der Erörterung der Dateistruktur des Repositorys. Diese Dateistruktur und die gesamte Speicherkonfiguration müssen im Hauptmodul Ihrer Anwendung vorhanden sein. In unserem Beispiel fehlt sie jedoch. Daher ist der Speicher im Hauptmodul unserer Anwendung vorhanden (die Schritte sind fast gleich, wenn Sie dies im Hauptmodul tun).
Die Ordnerstruktur ist eine Darstellung der tatsächlichen Speicherzusammensetzung. Sie haben einen Hauptordner mit dem Namen "Speicher" und fünf Unterordner, die jeden der Hauptakteure im Speicher darstellen: "Aktionen", "Effekte", "Redurs", "Selektoren" und "Status".Erstellung von Speicher- und Anfangswerten
Wie bereits erwähnt, werden wir zwei Hauptabschnitte haben: unsere Anwendung, Benutzer und Konfiguration. Für beide müssen wir einen Status und einen Anfangsstatus erstellen und dies auch für den Status der Anwendung tun.Wir haben zwei Schnittstellen für die Benutzerdefinition und Konfiguration erstellt. Wir haben auch eine für die HTTP-Antwort des Benutzers, es ist nur ein IUser-Array.
Beginnen wir mit dem Benutzerstatus (store / state / user.state.ts):
Was machen wir hier:- Wir erstellen und exportieren eine Schnittstelle mit einer Benutzerumgebungsstruktur.
- Wir machen dasselbe mit dem anfänglichen Benutzerstatus, der die neu erstellte Schnittstelle implementiert.
Für den Konfigurationsstatus machen wir dasselbe (store / States / config.state.ts):
Schließlich müssen wir den Anwendungsstatus generieren (store / States / app.state.ts):
- Der Anwendungsstatus enthält den Benutzerstatus und die Konfiguration sowie den Status des Routers.
- Dann setzen wir den Ausgangszustand der Anwendung.
- Schließlich wird die Funktion exportiert, um den Ausgangszustand zu erhalten (wir werden sie später verwenden).
Aktionen erstellen
Lesen Sie unbedingt die Definition der Aktion, die wir im vorherigen Artikel besprochen haben .
Wir müssen Aktionen für Benutzer und Einstellungen erstellen. Beginnen wir mit den Benutzeraktionen (store / action / user.actions.ts):
Gehen wir den Code ein wenig durch:- Enum, . , , , .
- . Action ngrx. , , , .
- , , . , , , .
Und das ist alles ... das Erstellen von Aktionen ist einfach. Mal sehen, wie die Konfigurationsaktionen aussehen (store / action / config.actions.ts): Hier gibt es
nichts Neues, wahrscheinlich fühlen Sie sich jetzt mit allem, was in dieser Datei passiert, wohl.Großartig, wir haben bereits den Status und die Aktionen festgelegt ... lasst uns Zahnräder erstellen!Getriebe anlegen
Lesen Sie unbedingt die Definition der Getriebe, die wir in einem früheren Artikel besprochen haben .
Wir werden Getriebe haben, die auf einige Aktionen reagieren, da andere durch Effekte behandelt werden, die wir später implementieren werden.Wir benötigen einen Reduzierer für Benutzer und einen anderen für die Konfiguration, aber wir müssen auch Anwendungsreduzierer generieren. Schauen wir uns zunächst die Benutzerreduzierer an (store / redurs / user.reducers.ts):
Lassen Sie uns die Implementierung diskutieren:- Eine Reduziererdeklaration empfängt einen Status und in diesem Fall eine Benutzeraktion und gibt einen IUserState zurück.
- Mit der switch-Anweisung generieren wir Beobachtungen für jede mögliche Art von Aktion.
- Jeder Fall gibt ein neues Objekt zurück, das das Ergebnis der Verschmelzung des alten Zustands und des neuen Werts ist.
- Alle Getriebe haben ein Standardergebnis, das einfach den Zustand ohne Änderungen zurückgibt.
Und das ist alles. Sie werden nichts anderes im Getriebe finden. Werfen wir einen Blick auf die Konfigurationsreduzierer (state / redurs / config.reducers.ts):
Schauen
wir uns abschließend die Anwendungsreduzierer (Speicher) an: Hier fügen wir alle Reduzierer zur Reduzierungszuordnung der Anwendung hinzu. Wir verwenden eine Aktionsreduzierungskarte für die zusätzliche Typprüfung. Später werden wir diese Anwendung mit Reduzierstücken für das Speichermodul versehen.Effekte hinzufügen
Lesen Sie unbedingt die Definition von „Effekten“, die wir in einem früheren Artikel besprochen haben .
Sie haben wahrscheinlich schon bemerkt, dass wir in Getrieben nicht alle Aktionen verarbeiten. Dies liegt daran, dass wir verpasste Aktionen in Effekten behandeln werden, da diese Aktionen Nebenwirkungen haben.Beginnen wir mit benutzerdefinierten Effekten (store / effect / user.effects.ts):
Vieles, was in dieser Datei passiert. Versuchen wir sie zu erklären:- Wir deklarieren unsere benutzerdefinierten Effekte mit einem Injektionsdekorateur.
- Wir deklarieren unsere Effekte mit dem von ngrx / Effects bereitgestellten Effektdekorator.
- Mit den von ngrx / Effects bereitgestellten Aktionen starten wir die Pipeline unseres Operators für diesen Effekt.
- Der nächste Schritt besteht darin, die Art der Effektaktion mit dem ofType-Operator festzulegen.
- Die folgenden Teile sind die rxjs-Operatoren, mit denen wir das bekommen, was wir brauchen (wir haben bereits einen Link zur rxjs-Dokumentation in diesem Artikel).
- Schließlich sendet Effect in der letzten Anweisung eine weitere Aktion.
- Im Konstruktor implementieren wir die Dienste, die wir verwenden werden, die Aktionen für ngrx / Effects und in diesem Fall auch das Repository (beachten Sie, dass dies eine Demo ist und wir den ausgewählten Benutzer aus der Liste der Benutzer in unserem Repository abrufen).
Dies ist fast die gleiche Struktur, die Sie mit jedem Effekt sehen werden. In diesem Fall senden wir nur eine erfolgreiche Aktion, aber wir können Fehler oder jeden anderen Status senden, den wir in unseren Anwendungsreduzierern verarbeiten möchten.Betrachten Sie die Konfigurationseffekte (store / effect / config.effects.ts):
Jetzt ist es Zeit, über Selektoren zu sprechen ..., .
Es macht keinen Sinn, die Schichten unseres Zustands überall zu wiederholen. Erstellen wir also einige Selektoren, die wir wiederverwenden können.Schauen
wir uns wie immer zuerst die Benutzerselektoren an (store / selectors / user.selectors.ts): Dies ist wirklich verständlich, da wir in unseren Selektoren keine Datentransformationen durchführen, sondern einfach den Slice des Speichers zurückgeben, auf den der Selektor mit der Funktion verweist createSelector von ngrx / store.Der erste Parameter ist ein Fragment des Speichers, der zum Empfangen von Daten verwendet wird (es kann sich um ein Array mit mehreren Teilen des Status handeln). Der zweite Parameter ist eine anonyme Funktion, die entscheidet, was der Selektor zurückgibt.Schauen wir uns die Konfigurationsselektoren an (store / selectors / config.selectors.ts):
Endgültige Einrichtung
Nun, wir haben alles geschaffen, was unser Speicher benötigt, aber eines fehlt uns immer noch - alles zusammenzusetzen. Ich werde dies im Anwendungsmodul tun, aber Sie können dasselbe im Hauptmodul Ihrer Anwendung anwenden.Fügen
wir ein Anwendungsmodul hinzu: Was haben wir hier gemacht:- Wir importieren unsere Getriebe und stellen sie im forRoot-Speichermodul zur Verfügung.
- Wir importieren unsere Effekte und stellen sie innerhalb des Arrays im forRoot-Effektmodul bereit.
- Wir haben die Konfiguration für das Statusmodul des Routers eingerichtet, der den stateKey-Router bereitstellt.
- Und wir fügen Store-Entwickler-Tools hinzu, wenn die Umgebung nicht produziert wird.
Die ersten beiden Schritte sind notwendig, während die Schritte 3 und 4 ich sehr empfehle, aber sie sind nicht erforderlich.Jetzt haben wir es endlich geschafft ... wir können unseren Speicher in Komponenten nutzen!Speichernutzung in einigen Komponenten
Wir nähern uns dem Ende! Mal sehen, wie wir unseren Speicher verwenden ...Lassen Sie uns zuerst die Konfiguration erhalten, wenn die Anwendung gestartet wird:
- Wir fügen unserer app.component Speicher hinzu.
- Wir setzen die Komponenteneigenschaft in der Konfiguration auf den Wert des Selektors, da wir einige dieser Informationen in HTML anzeigen möchten.
- Bei onInit senden wir die Aktion, um die Konfiguration zu erhalten.
Das ist alles ... Wir codieren bereits einen Effekt, der diese Aktion steuert, und einen Reduzierer, der diesen Effekt verarbeitet. Sobald der Store in einen neuen Status wechselt, ändert der Selektor den Wert unseres Eigentums.So verknüpfen Sie dies mit HTML:
Sobald config $ einen Wert hat, wird dieser in HTML angezeigt.Sehen wir uns nun die Liste der Benutzer an (container / users / users.component.ts):
- Während wir die Konfiguration verwalten, erhalten wir eine Liste der Benutzer. Zuerst fügen wir das Repository in die Benutzerkomponente ein.
- Auf onInit veröffentlichen wir eine Aktion, um Benutzer zu erhalten.
- Wir erstellen eine Eigenschaft für die Komponente und weisen ihr mithilfe der Benutzerlistenauswahl eine Benutzerliste zu.
HTML sieht folgendermaßen aus:
Wir zeigen die Liste der Benutzer in der Präsentationskomponente an, senden die Liste und ordnen den ausgewählten Benutzer der Navigationsfunktion zu, die in der Benutzercontainerkomponente oben zu sehen ist.Schauen wir uns die benutzerdefinierte Containerkomponente an:
Diese Komponente empfängt die Parameterkennung von der aktivierten Route, und Sie sind wahrscheinlich bereits mit dem Rest vertraut, sendet die Kennung als Parameter, wählt den ausgewählten Benutzer aus ...Wenn Sie die Anwendung debuggen, sehen Sie die Entwicklertools, die recht einfach sind zu verwenden ... aber in diesem Artikel haben wir genug studiert, und ich hoffe, dass Sie diese Tools leicht herausfinden können.Fazit
In diesem Artikel habe ich versucht, eine klare und verständliche Einführung in NGRX zu geben, die Ihnen alles bietet, was Sie wissen müssen, um mit diesem Tool mit der Entwicklung zu beginnen.Ich hoffe wirklich, dass der Artikel Ihnen hilft, die Aktionsvorlage zu verstehen, und empfehle, dass Sie sie herunterladen und ein wenig mit dem Code spielen.