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

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!

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

• Angular Service Layers: Redux-, RxJs- und Ngrx-Store - Wann und warum ein Store verwendet werden?
• Ngrx Store - Ein Architekturhandbuch

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

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.

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.