CODEWITHSUNDEEP
angularredux
Bharat Joshi
Bharat Joshi

Reputation: 139

State Management in Angular2.0+

We are developing an application, in which we need some shared data e.g. among different component module.

We can't store it in local or global storage as it's sensitive information so we dont want user can open developer tool and view data from there.

I had explored we and what come to understand me is we can use Redux or RXJS.

I am trying to achieve it through redux can anybody help me what need to be done if I want to store simple username, country and its latitude on store and how can I use them

Upvotes: 2

Views: 3347

Answers (3)

Kenank
Kenank

Reputation: 366

Take a look at Type-R Type-R

Type-R is the modern JS data framework to manage complex domain and UI application state. It is a serializable type system for JS and TS. Data structures you describe with Type-R models are automatically and with zero effort:

  • mapped to JSON and, optionally, REST API
  • protected from improper updates at run-time
  • deeply observable.

Upvotes: 0

emarticor
emarticor

Reputation: 360

Redux is not available in Angular in the sense of "the Redux project". However, Redux can be used in many ways as a pattern—which is the most important part of Redux anyway.

NgRx

One way to go would be NgRx. That project is inspired by the Redux pattern, but actually uses RxJs for state management, so it might be in fact what you're looking for—if you're looking for an out of the box solution that is. In addition to state management, NgRx provides development tools and integrations with the router. I could summarize the setup here, but there's a very clear walkthrough in the readme for @ngrx/store itself: https://github.com/ngrx/platform/blob/master/docs/store/README.md.

Singleton Service

If you don't want the added dependency, you can simply have a singleton service. Angular architecture is built around the understanding of Dependency Injection in a hierarchical manner.

A service will be a singleton as long as it's provided by the same injector; however, you can direct the injection system to look upward in the logical component tree, but that may be too complicated for what you're looking for based on your question.

Perhaps the easiest way to provide an application-wide service to store user data would be to declare the service as a provider of the root injector or the application injector. A common pattern for that is the forRoot pattern seen here: https://angular.io/guide/ngmodule#configure-core-services-with-coremoduleforroot.

Hope this helps!

Upvotes: 2

Rahul Singh
Rahul Singh

Reputation: 19622

Yes your research has landed you on the perfect spot . But i would say you can use other ways too .

About Ngrx

Firstly What is Redux ?

Redux is an application state manager for JavaScript applications, and keeps with the core principles of the Flux-architecture by having a unidirectional data flow in your application. Redux applications have only one global, read-only application state. This state is calculated by "reducing" over a collection or stream of actions that update it in controlled ways.

Redux In Angular ?

Redux state managers have been very well received and have inspired the creation of @ngrx, a set of modules that implement the same way of managing state as well as some of the middleware and tools in the Redux ecosystem. @ngrx was created to be used specifically with Angular and RxJS, as it leans heavily on the observable paradigm. Both the Components you see above are managed using ngrx store (updated to v4) Advantages of upgrading now we have support for lazy loading directly in ngrx using Featured Module

Where to Use it ?

A small scenario will make its use quite clear

I am hoping you might have used facebook right :P so if you look @ facebook's website you will see multiple components like navbar, left panel, chatbox etc. Ever wondered when a new message is delivered to you all these are updated simultaneously how ? If they went for srevices or Event Emitters they would be engulfed in a sea of spaghetti code. Which even if implemented will be very hard to debug or make changes .

Here comes the use of ngrx state management all the information is stored @ a single place and all the components are identified when the state of the data is changed . A Look this answer from stack overflow will clear the concepts even more Image clear.

Shared Services

Shared services are nothing but a Smaller implementation of ngrx and based on Observables . I would suggest if your app size is huge then go for ngrx else shared services.

Check the Links for more info on the same and how to use them .

Upvotes: 3

Related Questions