Statusverwaltung in Angular2.0 +

Question

Wir entwickeln eine Anwendung, in der wir einige gemeinsame Daten benötigen, z. unter verschiedenen Komponentenmodul.

Wir können es nicht im lokalen oder globalen Speicher speichern, da es sich um vertrauliche Informationen handelt, so dass der Benutzer nicht das Entwicklerwerkzeug öffnen und Daten von dort anzeigen kann.

Ich hatte uns erkundet und was mich zu verstehen kommt ist, dass wir Redux oder RXJS verwenden können.

Ich versuche es durch redux zu erreichen, kann mir jemand helfen, was getan werden muss, wenn ich einfach Benutzername, Land und seine Breite auf Speicher gespeichert werden sollen, und wie kann ich sie verwenden

Answer 1

Ja Ihre Forschung gelandet Sie an der perfekten Stelle. Aber ich würde sagen, dass Sie auch andere Möglichkeiten nutzen können.

• Ngrx - Redux Architektur in Angular
• Shared Services

Über NGRX

Erstens Was Redux ist?

Redux ist ein Anwendungszustand Manager für JavaScript-Anwendungen und hält mit den Kernprinzipien der Flux-Architektur durch einen unidirektionale Datenfluss in der Anwendung ist. Redux-Anwendungen haben nur einen globalen, schreibgeschützten Anwendungsstatus. Dieser Zustand wird berechnet durch "Reduzieren" über eine Sammlung oder einen Strom von Aktionen, die es in gesteuerten Wegen aktualisieren.

Redux In eckig?

Redux Zustand Manager sehr wurden gut aufgenommen und haben die Schaffung von @ngrx, einen Satz von Modulen, die die gleiche Art und Weise von Verwaltung Zustand sowie einen Teil der Middleware und Tools in der Redux implementieren inspiriert Ökosystem. @ngrx wurde speziell für die Verwendung mit Angular und RxJS entwickelt, da es sich stark an das beobachtbare Paradigma anlehnt. Beide die Komponenten Sie oben sehen, verwenden NGRX Speicher verwaltet (aktualisiert v4) Vorteile der Aufrüstung jetzt haben wir die Unterstützung für verzögertes Laden direkt in NGRX mit Feature-Modul

Wo es verwenden?

Ein kleines Szenario wird seine Verwendung ganz klar

ich Sie Facebook Recht könnte verwendet bin der Hoffnung machen haben: so P, wenn Sie Facebook Webseite aussehen @ Sie mehrere Komponenten wie navbar, links Panel sehen werden, Chatbox usw. Überhaupt gewundert, wenn eine neue Nachricht an geliefert wird, werden Sie alle diese gleichzeitig aktualisiert, wie? Wenn sie für svices oder Event Emitter gingen, würden sie in einem Meer von Spaghetti-Code verschlungen werden. Welche selbst wenn implementiert werden wird sehr schwer zu debuggen oder Änderungen vornehmen.

Hier kommt die Verwendung von ngrx Zustand-Management alle Informationen @ ein einziger Ort gespeichert und alle Komponenten werden identifiziert, wenn der Zustand der Daten geändert wird. A Schauen Sie sich diese Antwort von Stack-Überlauf wird die Konzepte noch klarer Image clear.

Shared Services

Shared Services sind nichts anderes als eine kleinere Umsetzung NGRX und basieren auf Observablen. Ich würde vorschlagen, wenn Ihre App Größe ist, dann gehen Sie für ngrx sonst geteilte Dienste.

Überprüfen Sie die Links für weitere Informationen über die gleichen und wie Sie sie verwenden.

Answer 2

Redux ist in Angular nicht im Sinne des "Redux-Projekts" verfügbar. Redux kann jedoch auf viele Arten als Muster verwendet werden - was ohnehin der wichtigste Teil von Redux ist.

NGRX

Ein Weg NGRX wäre zu gehen. Dieses Projekt ist vom Redux-Muster inspiriert, nutzt aber RxJs für die Zustandsverwaltung, also könnte es genau das sein, wonach Sie suchen - wenn Sie nach einer Out-of-the-Box-Lösung suchen. Zusätzlich zur Zustandsverwaltung stellt NgRx Entwicklungstools und Integrationen mit dem Router bereit. Ich könnte das Setup hier zusammenfassen, aber es gibt eine sehr übersichtliche Lösung in der Readme für @ngrx/store selbst: https://github.com/ngrx/platform/blob/master/docs/store/README.md.

Singleton-Service

Wenn Sie die zusätzliche Abhängigkeit nicht wollen, können Sie einfach einen Singleton-Service. Die Winkelarchitektur baut auf dem Verständnis von Dependency Injection in einer hierarchischen Weise auf.

Ein Service wird ein Singleton sein, solange er vom selben Injektor bereitgestellt wird; Sie können jedoch das Injektionssystem so steuern, dass es in der Struktur der logischen Komponenten nach oben zeigt. Dies ist jedoch aufgrund Ihrer Frage möglicherweise zu kompliziert für das, was Sie suchen.

Die einfachste Möglichkeit, einen anwendungsweiten Dienst zum Speichern von Benutzerdaten bereitzustellen, besteht darin, den Dienst als Anbieter des Root-Injektors oder des Anwendungsinjektors zu deklarieren. Ein übliches Muster dafür ist das forRoot Muster, das hier zu sehen ist: https://angular.io/guide/ngmodule#configure-core-services-with-coremoduleforroot.

Hoffe, das hilft!