ngRx Store in Angular

Bevor ich anfange, eine kleine Hintergrundgeschichte. Vor ein paar Wochen gab es in einem Angular-Projekt, an dem ich arbeitete, eine Anforderung, bei der ich ein Datenelement intakt halten musste, damit mehrere andere Komponenten es verwenden konnten. Mein React-Instinkt schlug mir vor, eine Angular-Version der Kontext-API zu verwenden, was mich zu drei Angular-Methoden führte, um Zustände zu verwalten und Daten intakt zu halten.

1. Komponentenstatus: Für einfache Anwendungen oder Komponenten mit minimalen gemeinsamen Daten können wir den Status innerhalb einzelner Komponenten mithilfe der Komponenteneigenschaften und der Ereignisbindung von Angular verwalten. Das war eindeutig unpassend, weil ich Daten über mehrere Komponenten hinweg teilen musste.

2. Dienstbasiertes Zustandsmanagement: Dienste können verwendet werden, um zentralisierte Zustandsverwaltungslösungen zu erstellen. Aber Leistung und Skalierbarkeit der Anwendung werden bei diesem Ansatz beeinträchtigt.

3. ngRx Store: ngRx Store bietet zentralisierte Statusverwaltungsfunktionen. NGRX verwendet RxJS-Observablen und -Aktionen, um den Zustand zu verwalten.

Von den drei schien ngRx Store am besten geeignet zu sein.

Implementierung des ngRx Store:

Um die Implementierung von ngRx besser zu verstehen, müssen wir zunächst verstehen, wie ngRx überhaupt funktioniert.

Der Fluss beginnt bei der Komponente. Das Gute an ngRx ist, dass unsere Komponente nicht wissen muss, wie sie den Zustand verwaltet. Das Einzige, worum es geht, ist das Auslösen einer Aktion, um darüber zu informieren, dass etwas passiert ist (ein Ereignis), beispielsweise wenn der Benutzer auf die Schaltfläche „Löschen“ geklickt hat.

An diesem Punkt kommt der Reduzierer ins Spiel. Der Reduzierer ist dafür verantwortlich, zu bestimmen, wie eine bestimmte Aktion den Zustand ändern soll. Normalerweise haben wir einen Reduzierer für jede Entität, für die wir den Status verwalten möchten. Reducer erkennt also alle in der App ausgelösten Aktionen und bestimmt, wie der Status geändert werden soll. Sobald er geändert wurde, speichert er den aktualisierten Status im ngRx Store (einem globalen Speicher für alle Status in der Anwendung).

Wenn schließlich eine Komponente auf den Store zugreifen möchte, verwendet die Komponente einen Selektor, um den Status, den sie benötigt, aus dem Store abzurufen.

Jetzt machen wir uns (eigentlich meine) Hände schmutzig und implementieren einen Store für eine Todo-Anwendung.

Schritt 1: Aktion erstellen

Innerhalb der Methode „createAction“ übergeben wir zwei Parameter – eine eindeutige Zeichenfolge, die zur Unterscheidung einer Aktion verwendet wird, und ein weiterer Parameter ist die Nutzlast, die wir senden möchten (optional).

Schritt 2: Reduzierungen erstellen
Im Reduzierer übergeben wir den Anfangszustand und die Aufgabe, die beim Auslösen einer bestimmten Aktion ausgeführt werden soll.

Schritt 3: Aktion auslösen
Wir versenden eine Aktion, indem wir die Versandmethode des Shops aufrufen und ihm die Aktion übergeben.

Schritt 4: Selektor erstellen

AppState bezieht sich auf den zentralen Speicher für die gesamte Anwendung, aus dem wir den Todo-Status auswählen. Jetzt können wir damit beginnen, die Geschäftsdaten zu nutzen, wie ich es in der Zeile Nr. des Dispatching Actions-Codes getan habe. 11.

Schließlich müssen wir den todoReducer in unsere Importe des App-Moduls einfügen, damit er in der gesamten Anwendung verfügbar ist.

Abschluss

In diesem Blog habe ich den ngRx-Store im Detail zusammengefasst und erklärt, wie er funktioniert und wie wir ihn in unserer Anwendung implementieren können. Der ngRx-Speicher kann sehr nützlich sein, wenn die Anwendung wächst, um Daten zu speichern und über verschiedene Komponenten hinweg darauf zuzugreifen. Hoffe es hat geholfen ;)

Das obige ist der detaillierte Inhalt vonngRx Store in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!