Angular Ngrx Store и двусторонняя привязка данных

Question

Я изучаю, как использовать библиотеку ngrx/store в Angular 5, и я заметил неожиданное поведение... Пожалуйста, помогите мне понять, является ли это поведение по умолчанию для этой библиотеки, потому что я действительно не ожидал этого вообще...

Итак, моя цель - создать одноэлементное хранилище для хранения конфигурации приложения и нескольких состояний для всех моих компонентов, поэтому, когда компонент обновляет хранилище, все подписанные компоненты получают обновленное хранилище.

В одном из моих компонентов я использую следующий конструктор:

newItems: any

constructor (
private _store: Store<State>
) {

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

}

Поэтому я беру текущее состояние своего магазина и устанавливаю переменную "this.newItems" в "state.newItems". У меня есть некоторые входные данные в моем шаблоне, связанные с некоторыми свойствами "newItems", например:

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>

Я ожидал, что мне потребуется отправить действие в моем компоненте, чтобы фактически изменить мой магазин, но кажется, что двустороннее связывание данных через [(ngModel)] делает это автоматически, без каких-либо действий вообще! Я просто изменяю свой ввод, и мой магазин обновляется, и обновленная версия автоматически доступна через все мое приложение.

Это ожидаемое поведение ngrx/store, когда я присваиваю одно свойство store переменной компонента и объединяю его с [(ngModel)]?

Если да, то это действительно хорошо в некоторых случаях, так как мне не нужно создавать многочисленные действия для изменения свойств моего магазина. Но я боюсь, что это какая-то ошибка, которую я не могу распознать.

Заранее спасибо!

Answer 1

Вы должны создать копию предметов из магазина, когда вы их получите

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

И да, это ожидаемое поведение, если значение является массивом или объектом

Answer 2

Да, это ожидаемое поведение, и вы правы, государство должно быть неизменным.

Вы можете использовать ngrx-store-freeze в режиме разработки, чтобы определить, когда вы делаете что-то, чего не следует делать.