State Management in Angular2.0 +

Question

Nous développons une application dans laquelle nous avons besoin de données partagées, par ex. parmi le module de composant différent.

Nous ne pouvons pas le stocker dans un stockage local ou global car ce sont des informations sensibles, donc nous ne voulons pas que l'utilisateur puisse ouvrir l'outil de développement et afficher les données à partir de là. J'ai exploré nous et ce qui vient de me comprendre est que nous pouvons utiliser Redux ou RXJS.

Je suis en train de réaliser par Redux quelqu'un peut me aider ce besoin à faire si je veux stocker simple nom d'utilisateur, le pays et sa latitude sur la boutique et comment puis-je les utiliser

Answer 1

Oui, votre recherche a atterri vous sur l'endroit parfait. Mais je dirais que vous pouvez utiliser d'autres moyens aussi.

• Ngrx - Redux Architecture in angulaire
• Shared Services

A propos NGRX

Tout d'abord Qu'est-ce que Redux?

Redux est un gestionnaire d'état d'application pour les applications JavaScript et maintient avec les principes fondamentaux du flux architecture en ayant un flux de données unidirectionnel dans votre application. Les applications Redux ont un seul état d'application global en lecture seule. " " est calculé en "réduisant" sur une collection ou un flot d'actions qui le met à jour en façons contrôlées.

Redux En angulaire?

gestionnaires de l'Etat Redux ont été très bien accueillis et ont inspiré la création d'@ngrx, un ensemble de modules qui mettent en œuvre la même manière de gérer l'Etat, ainsi que certains des middleware et des outils dans le Redux écosystème. @ngrx a été créé pour être utilisé spécifiquement avec Angular et RxJS, car il s'appuie fortement sur le paradigme observable. Les deux les composants que vous voyez ci-dessus sont gérées à l'aide NGRX magasin (mis à jour) v4 Avantages de la mise à niveau maintenant, nous avons le soutien pour le chargement paresseux directement à l'aide du module NGRX en vedette

Où l'utiliser?

Un petit scénario fera son utilisation tout à fait clair

J'espère que vous auriez pu utiliser facebook droite: P donc si vous regardez @ le site Web de facebook, vous verrez plusieurs composants comme barre de navigation, à gauche panneau , chatbox etc Jamais demandé quand un nouveau message est livré à vous tous ces sont mis à jour simultanément comment? S'ils allaient pour srevices ou Event Emitters ils seraient engloutis dans une mer de code spaghetti. Qui, même si mis en œuvre sera très difficile à déboguer ou apporter des modifications.

Voici venu l'utilisation de la gestion d'état ngrx toutes les informations sont stockées @ un seul endroit et tous les composants sont identifiés lorsque l'état des données est changé. A Regardez cette réponse du débordement de la pile va effacer les concepts encore plus Image claire.

Services partagés

services partagés ne sont que d'une mise en œuvre plus petite des NGRX et basé sur Observables. Je suggère que si la taille de votre application est énorme, optez pour les services partagés ngrx else.

Vérifiez les liens pour plus d'informations sur le même et comment les utiliser.

Answer 2

Redux n'est pas disponible en Angulaire dans le sens du "projet Redux". Cependant, Redux peut être utilisé de plusieurs façons en tant que pattern - qui est de toute façon la partie la plus importante de Redux.

NGRX

Une façon d'aller serait NGRX. Ce projet est inspiré par le modèle Redux, mais utilise en fait RxJs pour la gestion d'état, donc c'est peut-être ce que vous cherchez, si vous cherchez une solution prête à l'emploi. En plus de la gestion d'état, NgRx fournit des outils de développement et des intégrations avec le routeur. Je pourrais résumer la configuration ici, mais il y a une procédure pas à pas très claire dans le readme pour @ngrx/store lui-même: https://github.com/ngrx/platform/blob/master/docs/store/README.md.

service Singleton

Si vous ne voulez pas la dépendance supplémentaire, vous pouvez simplement avoir un service singleton. L'architecture angulaire est construite autour de la compréhension de l'injection de dépendance de manière hiérarchique. Un service sera un singleton tant qu'il est fourni par le même injecteur;

Un service sera un singleton tant qu'il est fourni par le même injecteur; Toutefois, vous pouvez diriger le système d'injection vers le haut dans l'arborescence des composants logiques, mais cela peut être trop compliqué pour ce que vous recherchez en fonction de votre question. La manière la plus simple de fournir un service à l'échelle de l'application pour stocker les données utilisateur serait de déclarer le service en tant que fournisseur de l'injecteur racine ou de l'injecteur d'application. Un modèle commun pour cela est le modèle forRoot vu ici: https://angular.io/guide/ngmodule#configure-core-services-with-coremoduleforroot.

Espérons que cela aide!