从组件 ngrx 更改存储状态

【问题标题】：changing the store state from component ngrx从组件 ngrx 更改存储状态
【发布时间】：2018-09-05 23:48:53
【问题描述】：

我正在使用选择器从商店中进行选择

this.quizz = this.store.select(getSelectedQuizz);

我在模板中使用异步管道从这个 observable 中读取数据

[*ngIf="quizz | async; let quizz"]

我只定义了动作并且我没有修改reducer但是当我保存表单时模板是一个表单我调度了一个更新动作，它只在我的动作中定义为只读但我注意到当我保存形成并调度商店更改的操作，我没有在减速器中指定任何逻辑来更新更新操作的状态，但我不明白为什么。

【问题讨论】：

【解决方案1】：

您正在使用 2-way 数据绑定将存储状态绑定到表单，这是一种不好的做法。
除了减速器外，不要触摸存储状态内的任何内容。

使用扩展运算符获取状态副本：

this.store.select(getSelectedQuizz).subscribe(quizz => 
    this.quizzModel = {...quizz };
);

还要注意深拷贝。使用 this.quizzModel = JSON.parse(JSON.stringify(quizz )); 之类的东西进行深层复制。

提示： 为避免此类错误，您可以强制状态为不可变。检查ngrx-store-freeze

【讨论】：

没有其他方法可以创建一个全新的 observable 而不是引用同一个 observable
@HachimiAhmedAmine 你不需要一个全新的 observable。只需保存 observable 结果的副本，如下所示： this.store.select(getSelectedQuizz).subscribe(quizz => this.quizz = {...quizz }