Question

我正在学习如何在Angular 5中使用ngrx / store库，我发现了一个意想不到的行为......请帮助我理解这是否是这个库的默认行为，因为我真的没想到这个在所有......

好吧，我的目标是创建一个单例商店，用于存储应用程序配置和所有组件的多个状态，因此当组件更新商店时，所有订阅的组件都会收到更新的商店。

在我的一个组件中，我正在使用以下构造函数：

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）]的双向数据绑定是自动执行此操作，而根本不需要任何操作！我只是修改我的输入，我的商店已更新，更新版本可通过我的整个应用程序自动获得。

当我将一个商店属性分配给组件变量并将其与[（ngModel）]组合时，这是ngrx / store的预期行为吗？

如果是，在某些情况下这确实很好，因为我不必创建许多操作来修改我的商店属性。但我担心这是某种我无法识别的错误。

提前致谢！

Answer 1

您应该在收到商品时从商店创建商品的副本

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

是的，如果值是数组或对象，那么它是预期的行为

Answer 2

是的，这是预期的行为，你是对的，状态应该是不可变的。

您可以在开发模式下使用ngrx-store-freeze来帮助您检测何时执行您不应该执行的操作。

Angular Ngrx Store和双向数据绑定

2 个答案: