Get best of the week

Angular: eine klare Einführung in NGRX

BildDer Zweck dieses Artikels ist es, eine saubere und klare Sicht auf ngrx zu geben . Dazu werde ich erklären, was Sie über ngrx wissen und verstehen müssen, und dann werden wir es anhand einfacher und klarer Codebeispiele in Aktion sehen.

Hier ist eine Liste von Themen, die wir in diesem Artikel diskutieren werden:

  • Was ist ngrx?
  • Vorteile der Verwendung von ngrx
  • Nachteile der Verwendung von ngrx
  • Wann soll ngrx verwendet werden?
  • Aktionen, Getriebe, Selektoren, Speicher und Effekte

Fortsetzung des Artikels mit einem Anwendungsbeispiel: "Angular: Ein Beispiel für die Verwendung von NGRX . "

Was ist NGRX?


NGRX ist eine Gruppe von Bibliotheken, die vom Redux-Muster „inspiriert“ sind, das wiederum vom Flux-Muster „inspiriert“ ist. Einfach ausgedrückt bedeutet dies, dass das Redux-Muster eine vereinfachte Version des Flux-Musters ist und NGRX die Winkel- / RXJS-Version des Redux-Musters ist.

Was ich mit der "Angular / Rxjs" -Version von Redux meine ... der "Angular" -Teil ist, dass ngrx eine Bibliothek zur Verwendung in Angular-Anwendungen ist. Ein Teil der "rxjs" ist, dass die ngrx-Implementierung um den rxjs- Stream herum funktioniert . Dies bedeutet, dass es mit beobachtbaren und verschiedenen beobachtbaren Operatoren funktioniert, die von rxjs bereitgestellt werden.

Das Hauptziel dieses Schemas besteht darin, den vorhersagbaren Zustand des Containers auf der Grundlage von drei Grundprinzipien sicherzustellen.


Schauen wir uns die drei Prinzipien des Redux-Modells an und zeigen wir die wichtigsten Vorteile auf, die sie bieten.

Die einzige Quelle der Wahrheit


Bei der Redux / Ngrx-Architektur bedeutet dies, dass der Status Ihrer gesamten Anwendung im Objektbaum im selben Repository gespeichert ist.
In einem Geschäft? Wir werden später über Repositories sprechen, aber für ein allgemeines Verständnis sind sie dafür verantwortlich, den Zustand aufrechtzuerhalten und Änderungen daran vorzunehmen, wenn sie darüber informiert werden (wenn die Aktion gesendet wird, werden wir später auch darüber sprechen).

Die Vorteile einer einzigen Quelle der Wahrheit sind zahlreich, aber für mich ist der interessanteste (weil dies jede Winkelanwendung beeinflusst) der folgende:

  • Wenn Sie eine Angular-Anwendung erstellen, teilen Sie normalerweise den Status auf und verwalten mehrere Dienste. Wenn Ihre Anwendung wächst, wird es immer schwieriger, Änderungen in Ihrem Status zu verfolgen, und infolgedessen wird es schwierig, Fehler zu beheben und zu warten. Eine einzige Quelle der Wahrheit löst dieses Problem, da der Status nur in einem Objekt und in einem verarbeitet wird Speicherort, so dass das Debuggen oder Hinzufügen von Änderungen viel einfacher wird.

Schreibgeschützter Status


Sie werden den Status niemals direkt ändern, sondern Aktionen senden, die Aktionen mit dem Objekt beschreiben (dies können beispielsweise das Abrufen, Hinzufügen, Entfernen oder Aktualisieren des Status sein).
Aktion senden? .. Wir werden später über die Aktionen sprechen. Zum allgemeinen Verständnis sind dies jedoch die Kennungen des Vorgangs in Ihrer Anwendung. Sie können gestartet (oder gesendet) werden, um die Anwendung anzuweisen, den von der Aktion dargestellten Vorgang auszuführen.
Indem Sie vermeiden, den Status von verschiedenen Orten aus zu aktualisieren, und einen zentralen Ort für Änderungen haben, die auf bestimmte Aktionen reagieren, erhalten Sie viele Vorteile. Ganz zu schweigen vom Wichtigsten:

  • Sie wissen, dass jede Zustandsänderung nur an einer Stelle erfolgt. Dies hat große Auswirkungen auf das Debuggen und Testen.
  • Sie wissen, dass die Operation im Status immer dieselbe ist, wenn eine bestimmte Aktion gesendet wird. Dies wirkt sich wiederum direkt auf das Debuggen und Testen aus.

Änderungen werden mit einfachen Funktionen vorgenommen.


Eine durch den Versand einer Aktion initiierte Operation ist eine einfache Funktion, die im Rahmen der Redux-Architektur als Reduzierer bezeichnet wird.

Diese Reduzierungen (denken Sie daran, dass es sich um einfache Funktionen handelt) erhalten eine Aktion und einen Status. Abhängig von der gesendeten Aktion (normalerweise mit der switch-Anweisung) führen sie die Operation aus und geben ein neues Statusobjekt zurück.

Der Status in der Redux-Anwendung bleibt unverändert! Wenn ein Reduzierer etwas in einem Zustand ändert, gibt er daher ein neues Zustandsobjekt zurück.

Die Vorteile der Verwendung reiner Funktionen sind bekannt, z. B. die Tatsache, dass sie sofort getestet werden können, wenn Sie dieselben Argumente übergeben, die Sie als Ergebnis erhalten.

Dieser Ansatz ermöglicht es uns auch, mithilfe der Redux / ngrx-Entwicklungstools zwischen verschiedenen Instanzen unseres Status zu wechseln und zu sehen, was sich zwischen den Instanzen geändert hat und wer es unter anderem geändert hat. Die Verwendung reiner Funktionen und die Rückgabe neuer Statusinstanzen hat daher auch einen großen Einfluss auf das Debuggen.

Meiner Meinung nach besteht der Hauptvorteil jedoch darin, dass wir durch Binden aller Eingabedaten unserer Komponenten an die Statuseigenschaften die Änderungserkennungsstrategie in Push ändern können, was die Anwendungsleistung erhöht.

Großartig ... Also, was sind die Vorteile von NGRX?


Die meisten haben wir bereits erwähnt, als wir über die Prinzipien der Redux-Vorlage sprachen. Beachten wir jedoch die wichtigsten Vorteile der Verwendung der Redux-Vorlage in der Anwendung (meiner Meinung nach):

  • , , .
  • redux , .
  • , , , , ngrx rxjs, .
  • ngrx, .

…


  • NGRX, , . , , , . , .
  • . , - , , , , , , . () rxjs .
  • NGRX Google, , , Angular ngrx. - , , .

NGRX


Daher wird allgemein vereinbart, dass ngrx in mittleren / großen Projekten eingesetzt werden sollte, wenn die Verwaltung des staatlichen Managements schwierig wird. Einige fanatischere Leute werden etwas sagen wie "Wenn du ein Vermögen hast, dann hast du NGRX."

Ich bin damit einverstanden, dass es in mittleren oder großen Projekten verwendet werden sollte, wenn Sie über einen signifikanten Status und viele Komponenten verfügen, die diesen Status verwenden. Sie sollten jedoch berücksichtigen, dass Angular selbst viele Statusverwaltungslösungen bietet und wenn Sie einen starken Status haben Angular Development Team, dann brauchen Sie sich vielleicht keine Sorgen um ngrx zu machen.

Gleichzeitig glaube ich, dass ein starkes Angular-Entwicklungsteam auch entscheiden kann, ngrx in die Lösung aufzunehmen, da es die volle Leistung der Redux-Vorlage sowie die Stärke der rxjs-Operatoren kennt und sich mit beiden wohl fühlt ...

Wenn Sie eine einfache Antwort erwartet haben, Wenn Sie entscheiden möchten, wann Sie ngrx verwenden möchten, erhalten Sie es nicht und vertrauen niemandem, der Ihnen diese Antwort außerhalb Ihrer Organisation oder Gruppe gibt. Die Entscheidung hängt davon ab, die Vor- und Nachteile zu studieren, Ihr Team zu verstehen und deren Meinungen zu berücksichtigen.

NGRX-Aktionen, Getriebe, Selektoren, Speicher und Effekte


Dies sind die Grundbausteine ​​des ngrx-Streams. Jeder von ihnen übernimmt einen Teil des Prozesses zum Starten einer Operation, um unseren Zustand zu ändern und Daten zu erhalten.

Bild

Im Bild sehen wir den ngrx-Stream. Lass es uns erklären ...

  1. . , , , .
    …

    «» () . — , NGRX Action. Action' ( GetUserName):

    type (): , , . : '[User] Get User Login''.

    payload ( ): , . , . .
  2. , ( switch) , , .
    ...

    — , : . ngrx , , , , , .
  3. , - , . , - HTTP .
    ...

    ngrx , ngrx.

    Effects , - , , , , , .

    , API.

    , , (success, error ..), , ngrx.
    , ( ), «-» ( , ).
  4. . , ngrx , , .
    ...

    , , , .

    NGRX «» . , , .

    . . «store» , .

    ...

    Ein Store ist ein Objekt (eine Instanz der Store ngrx-Klasse), das die zuvor erwähnten Dinge (Aktionen, Reduzierer, Selektoren) kombiniert. Wenn beispielsweise eine Aktion gesendet wird (mithilfe der Sendefunktion des Speicherobjekts), ist der Speicher derjenige, der den entsprechenden Reduzierer findet und ausführt.

    Er ist auch Inhaber eines Antragsstaats.


Fortsetzung Artikel mit Anwendungsbeispielen: "Angular: Ein Beispiel für die Verwendung von NGRX . "

More articles:


All Articles