typescript - Angular Ngrx Store i dvosmjerno vezivanje podataka

Učim kako koristiti biblioteku ngrx/store u Angular 5 i primijetio sam neočekivano ponašanje... Molim vas, pomozite mi razumjeti je li ovo zadano ponašanje za ovu biblioteku, jer to uopće nisam očekivao...

Pa, moj cilj je stvoriti singleton spremište za pohranu konfiguracije aplikacije i više stanja za sve moje komponente, tako da kada komponenta ažurira spremište, sve pretplaćene komponente primaju ažurirano spremište.

U jednoj od mojih komponenti koristim sljedeći konstruktor:

newItems: any

constructor (
private _store: Store<State>
) {

_store.select('operations').subscribe(state => {
  console.log(state)
  this.newItems = state.newItems
})

}

Dakle, uzimam trenutačno stanje svoje trgovine i postavljam varijablu "this.newItems" na "state.newItems". Imam neke unose u svom predlošku povezane s nekim svojstvima "newItems", ovako:

itemProperties: any = [
{
  name: 'Description',
  key: 'desc'
},
{
  name: 'Manufacturer',
  key: 'manufacturer'
},
{
  name: 'Model',
  key: 'model'
},
{
  name: 'Observation',
  key: 'genObs'
}
]

<div *ngFor="let prop of itemProperties" class="gen-label-input" [ngClass]="{'filled': newItems[prop.key]}">
    <label>{{prop.name}}</label>
    <input [(ngModel)]="newItems[prop.key]">
</div>

Očekivao sam da ću trebati poslati akciju u svojoj komponenti kako bih zapravo modificirao svoj store, ali čini se da dvosmjerno povezivanje podataka preko [(ngModel)] to radi automatski, bez potrebe za bilo kakvim akcijama! Samo modificiram svoj unos i moj store se ažurira, a ažurirana verzija je automatski dostupna kroz cijelu moju aplikaciju.

Je li ovo očekivano ponašanje ngrx/store kada jednu svojinu iz trgovine dodijelim varijabli komponente i kombiniram je s [(ngModel)]?

Ako da, ovo je u nekim slučajevima stvarno dobro, jer ne moram stvarati bezbrojne radnje da bih mijenjao svojstva svoje trgovine. Ali zabrinut sam da je ovo neka vrsta pogreške koju ne mogu identificirati.

Unaprijed hvala!

Odgovor #1

Trebali biste napraviti kopiju predmeta iz trgovine kada ih primite

 this.newItems = state.newItems.map((item) => Object.assign({}, item))

I da, to je očekivano ponašanje ako je vrijednost niz ili objekt

Odgovor #2

Da, to je očekivano ponašanje i u pravu ste, stanje bi trebalo biti nepromjenjivo.

Možete koristiti ngrx-store-freeze u razvojnom načinu rada kako biste vam pomoglo otkriti kada radite nešto što ne biste trebali raditi.

Povezani članci