Angular 角度Ngrx存储和双向数据绑定

Angular 角度Ngrx存储和双向数据绑定,angular,typescript,angular5,ngrx,ngrx-store,Angular,Typescript,Angular5,Ngrx,Ngrx Store,我正在学习如何使用Angular 5中的ngrx/store库,我注意到一个意外的行为。。。请帮助我理解这是否是这个库的默认行为,因为我真的一点也没想到 我的目标是创建一个单例存储区,用于存储我的所有组件的应用程序配置和多个状态,因此当一个组件更新存储区时,所有订阅的组件都会收到更新的存储区 在我的一个组件中,我使用以下构造函数: newItems: any constructor ( private _store: Store<State> ) { _store.select(

我正在学习如何使用Angular 5中的ngrx/store库,我注意到一个意外的行为。。。请帮助我理解这是否是这个库的默认行为,因为我真的一点也没想到

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

在我的一个组件中,我使用以下构造函数:

newItems: any

constructor (
private _store: Store<State>
) {

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

}
newItems:any
建造师(
私人商店:商店
) {
_store.select('operations')。subscribe(状态=>{
console.log(状态)
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>
itemProperties:any=[
{
名称:'说明',
键:“desc”
},
{
名称:'制造商',
关键词:“制造商”
},
{
名称:'模型',
关键词:“模型”
},
{
名称:'观察',
关键:“热那亚”
}
]
{{prop.name}
我原以为需要在我的组件中分派一个操作来实际修改我的存储,但似乎通过[(ngModel)]的双向数据绑定正在自动执行此操作,而根本不需要任何操作!我只需修改输入,我的存储就会更新,更新后的版本会自动通过我的整个应用程序提供

当我将一个存储属性分配给一个组件变量并将其与[(ngModel)]组合时,这是ngrx/store的预期行为吗

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


提前谢谢

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

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

是的,如果值是数组或对象,这是预期的行为

是的,这是预期的行为,您是对的,状态应该是不可变的


您可以在开发模式下使用,以帮助检测您何时做了不应该做的事情。

您似乎以错误的方式编写了应用商店。它应该是不变的。在使用它之前要三思而后行,因为它会导致许多问题。您不需要为商店的每个模型属性编写操作,只要在每次需要更新时更新整个模型即可。利用Angular的形式系统在这里很方便是的,这正是我想的问题,它应该是不变的。但是,如果您使用双向数据绑定而不创建我的存储属性的副本,它似乎是可变的。。。嗯,这绝对不是商店的目标,但我认为当我有多个共享相同配置的组件时,这可能会很有用。。。你怎么认为?非常感谢。这是非常危险的,但世界属于最勇敢的人:)哈哈哈,好的,谢谢你的意见!在我的应用程序中,我认为这不会是一个问题,只有一些阵列和配置应该在5个不同的组件之间同步,所以我认为我使用这种方法是对我有利的。另一个解决方案是创建rxjs BehaviorSubject并将其作为可观察对象公开,在我的组件中订阅它们并通过“next()”发出更改,但与我的应用商店的全局双向绑定似乎是一个更简单的解决方案。非常感谢,我没有想到复制数组或对象属性,这消除了与我的商店的双向绑定。但由于这是deafult行为,我认为这是一种保持共享同一配置的多个组件同步的简单方法,不是吗?这有副作用吗?谢谢我不了解副作用。是的,存储用于保存不同组件的公共数据。并且避免了refs对其进行修改——这是开发者关注的一部分,那么我认为将我的存储双向绑定到我的一些组件上是没有问题的,因为无论如何,我必须在某个时候手动触发这些更改。。。再次感谢,你的回答很有帮助!在这种情况下,其他组件将无法注意到存储更改,我注意到,但这些更改不会在我的DOM中触发除ngClasses和NGIF之外的任何影响,并且这些属性可以在存储从另一个组件更新时按需执行的函数中进行验证。如果我必须检测到这些变化,那么这个解决方案肯定是不可能的。再次感谢你!谢谢你的回答!嗯,我认为在我的情况下,对于我的存储的一些属性(多个组件之间共享的配置)来说,一个可咕哝的状态是合适的,因为我不需要对这些属性进行复杂的更改,它们只是布尔值或steing输入数据,不需要任何操作。您认为这是否合适??如果它与加载只读配置值一样简单,您可以创建一个包含
configuration
对象的
ConfigurationService
。一旦
configuration
对象完全加载,您就可以使用
object.freeze(configuration)
来避免不必要的修改。是的,我已经考虑过了,但是这些配置非常复杂。这是一个用于资产管理的现场数据收集应用程序,因此用户在更改结构中的位置时会随时更改配置。如果我使用服务,我必须创建rxjs BehaviorSubject,并在我的所有组件中订阅它们的方法,以允许在所有活动组件之间进行配置同步,还需要多个函数来更新我的每个配置。我认为带双向数据绑定解决方案的muttable store更容易实现。你对这个动态场景怎么看?你也许可以在减速器外改变状态,但你能激发监听的可观察物吗