Angular Architecture & Best Practices - ziua 4

State Management

Opțiuni: servicii, NgRx, ngrx-data, observable store

Altele neabordate: Akita, Ngxs, MobX

Tipuri de stare: specifică aplicației / sesiunii / de business

Servicii Angular

Este cea mai simplă metodă. 

Mai multe servicii pot avea legătură la un storage comun. 

NgRx 

• reactive state management inspired by Redux; unify the events & derive state using RxJS
• Redux + RxJS = NgRx 
• Redux - popularizat de Facebook și React
• o singură sursă de adevăr în privința stării datelor
• furnizează date immutable
• cost: complexitatea codului

// în componentă:

constructor (private store: Store<EntityState>) {} 

this.store.dispatch (new CustomerAction.GetCustomers()); // 1 

// customer.reducers.ts  cheamă servicii 

// customer.effects.ts  este un @Injectable și are metode adnotate cu @Effect care ret. un Observable

// customer.selectors.ts  face subscribe la Store, furnizează rezultatul în componentă

ngrx-data = NgRx simplificat, un wrapper (mai puțin cod - o linie de cod/entitate)

Observable Store

== pachet: @codewithdan/observable-store

== sursă unică a datelor, read only, notificări la schimbare de stare către cei care s-au abonat, păstrează un istoric al schimbării de stare (onBefore, onAfter), cod puțin & funcționează cu orice framework

== inclus într-un serviciu care extinde ObservableStore<TipulDeDate>

== include starea (TipulDeDate) prin this.getState()

Inițializare prin this.setState(data, actionName); // acțiunea se salvează pt logging

== componenta face subscribe la Observable store