Angular Ngrx Store和双向数据绑定

Question

我正在学习如何使用 Angular 5 中的 ngrx/store 库，我注意到一个意外行为...请帮助我了解这是否是该库的默认行为，因为我真的完全没想到会这样...

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

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

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和双向数据绑定

Angular Ngrx Store and two-way data binding

angular

typescript

angular5

ngrx

ngrx-store