Winkel 6 - Warum @ ngrx / store anstelle von Service Injection verwenden?

85

Ich lerne kürzlich Angular 6 mit @ ngrx / store, während eines der Tutorials darin besteht, @ ngrx / store für die Statusverwaltung zu verwenden. Ich verstehe jedoch nicht, welchen Nutzen die Verwendung von @ ngrx / store hinter den Kulissen hat.

Zum Beispiel können wir für eine einfache Anmelde- und Anmeldeaktion, bei der zuvor der Dienst verwendet wurde (nennen wir ihn AuthService) , die Backend-API aufrufen, "userInfo" oder "token" im AuthService speichern und den Benutzer zu "HOME" umleiten. Seite und wir können AuthService in jede Komponente einfügen, in der wir die userInfo mithilfe von DI abrufen müssen, wobei einfach diese eine Datei AuthService alles handhabt .

Wenn wir jetzt @ ngrx / store verwenden, müssen wir die Aktion / den Status / den Reduzierer / die Effekte / den Selektor definieren, die wahrscheinlich in 4 oder 5 Dateien geschrieben werden müssen, um die oben genannten Aktionen oder Ereignisse zu verarbeiten. Manchmal müssen wir dann immer noch die Backend-API aufrufen Nutzung des Dienstes, der viel komplizierter und redundanter erscheint ...

In einem anderen Szenario sehe ich sogar, dass eine Seite @ ngrx / store verwendet, um das Objekt oder eine Liste von Objekten wie Rasterdaten zu speichern. , ist das für eine Art In-Memory-Store-Nutzung?

Zurück zur Frage, warum wir hier im Angular-Projekt @ ngrx / store over service register store verwenden. Ich weiß, dass es für die Verwendung von " STATE MANAGEMENT " vorgesehen ist, aber was genau ist das "STATE MANAGEMENT"? Ist das so etwas wie ein Transaktionsprotokoll und wann brauchen wir es? Warum sollten wir es am Frontend schaffen? Bitte teilen Sie uns Ihre Vorschläge oder Erfahrungen im @ ngrx / store-Bereich mit!

angular5 angular6 ngrx-store state-management KevDing
quelle
7
Letztes Jahr habe ich einen neuen Job in einer Firma angefangen. Sie verwendeten Angular mit Redux. Ich habe Redux nicht berührt, aber ich habe es seit seiner Beta-Version in Angular entwickelt. Mein erster Eindruck war, was zum Teufel ist das? So viel Komplikation, nur um mit der API zu kommunizieren und diese Daten zu abonnieren. Sie haben Redux buchstäblich für alles benutzt! Es war so ein Durcheinander, dass es unmöglich war zu arbeiten. Es ist wirklich nicht erforderlich, Redux / Ngrx in eine Angular-App zu integrieren. Sie können alles auf "Angular Way" machen
Dino
3
NgRx erhöht die Codekomplexität exponentiell mit einer Menge unnötigen Boilerplate-Codes. Auf der anderen Seite bietet es kaum etwas anderes als das, was Angular als komplettes Framework bereits standardmäßig angeboten hat. Dieser Blog-Beitrag enthält alle Informationen, die Sie benötigen: Angular Application State Management:
seidme

Antworten:

35

Ich denke, Sie sollten diese beiden Beiträge über Ngrx Store lesen:

Wenn der erste die Hauptprobleme erklärt, die von Ngrx Store gelöst wurden, zitiert er auch diese Aussage aus dem React How-To, "die für Original-Flux-, Redux-, Ngrx Store- oder andere Store-Lösungen im Allgemeinen gleichermaßen zu gelten scheint":

Sie werden wissen, wann Sie Flux benötigen. Wenn Sie nicht sicher sind, ob Sie es brauchen, brauchen Sie es nicht.

Für mich löst der Ngrx Store mehrere Probleme. Zum Beispiel, wenn Sie sich mit Observablen befassen müssen und wenn die Verantwortung für einige Observable-Daten zwischen verschiedenen Komponenten geteilt wird. In diesem Fall stellen Speicheraktionen und Reduzierungen sicher, dass Datenänderungen immer "richtig" durchgeführt werden.

Es bietet auch eine zuverlässige Lösung für das Zwischenspeichern von http-Anforderungen. Sie können die Anforderungen und ihre Antworten speichern, um zu überprüfen, ob für die von Ihnen gestellte Anforderung noch keine Antwort gespeichert ist.

Der zweite Beitrag befasst sich mit dem Problem, dass solche Lösungen in der React-Welt mit dem ungelesenen Nachrichtenzähler von Facebook aufgetaucht sind.

In Bezug auf Ihre Lösung zum Speichern nicht beobachtbarer Daten in Diensten. Es funktioniert gut, wenn Sie mit konstanten Daten arbeiten. Wenn jedoch mehrere Komponenten diese Daten aktualisieren müssen, treten wahrscheinlich Probleme bei der Änderungserkennung und bei unsachgemäßen Aktualisierungsproblemen auf, die Sie lösen können mit:

  • Beobachtermuster mit privatem Subjekt öffentlich Beobachtbar und nächste Funktion
  • Ngrx Store
Jean-Baptiste Courvoisier
quelle
9

Es gibt auch eine dritte Option, bei der Daten im Dienst sind und der Dienst beispielsweise direkt in HTML verwendet wird *ngFor="let item of userService.users". Wenn Sie also userService.usersim Dienst aktualisieren , nachdem die Aktion zum Hinzufügen oder Aktualisieren automatisch in HTML gerendert wurde, sind keine Observablen, Ereignisse oder Speicher erforderlich.

Aleksa
quelle
4
In AOT funktioniert es nicht, wenn der Dienst als privater Dienst injiziert wird. Die beste Vorgehensweise besteht darin, einen Dienst nicht der Vorlage einer Komponente auszusetzen. Behalten Sie stattdessen eine Variable in der Komponente bei und rufen Sie sie basierend auf der Variablen des Dienstes ab.
Srichandradeep C
2

Wenn die Daten in Ihrer App in mehreren Komponenten verwendet werden, ist eine Art Dienst zum Teilen der Daten erforderlich. Es gibt viele Möglichkeiten, dies zu tun.

Eine mäßig komplexe App sieht schließlich wie eine Front-End-Back-End-Struktur aus, bei der die Datenverarbeitung in Diensten erfolgt und die Daten über Observables den Komponenten zugänglich gemacht werden.

An einem Punkt müssen Sie eine Art API in Ihre Datendienste schreiben, wie Sie Daten ein- und ausgeben, Abfragen usw. Viele Regeln wie die Unveränderlichkeit der Daten und genau definierte Einzelpfade zum Ändern der Daten. Nicht anders als das Server-Backend, aber viel schneller und reaktionsschneller als die API-Aufrufe.

Ihre API wird am Ende wie eine der vielen bereits vorhandenen State-Management-Bibliotheken aussehen. Sie existieren, um schwierige Probleme zu lösen. Sie benötigen sie möglicherweise nicht, wenn Ihre App einfach ist.

Derek Kite
quelle