使用扩展运算符仍修改State变量？Angular5+NgRx+RxJS5.5问题求助

看起来你遇到了浅拷贝导致的状态意外变更问题——这在处理嵌套对象的不可变状态时非常常见！

问题根源 #

你用扩展运算符（...）或者for循环复制selection时，只是做了浅拷贝：也就是说，selection本身是新对象，但它内部的filters属性还是指向原状态里的同一个对象引用。所以当你修改filters.something时，其实直接修改了原状态中的filters对象，这就违背了NgRx状态不可变的原则。

解决方案：实现深拷贝 #

针对你的场景，这里有几种可靠的深拷贝方式：

1. 多层扩展运算符（推荐，无额外依赖）

如果你的selection和filters结构比较固定，可以手动逐层展开嵌套对象，确保每一层都是新的引用：

// 在你的Effect中
const currentSelection = state.selection;
const filters = {
  // 拷贝selection的顶层属性
  ...currentSelection,
  // 重新创建filters对象，拷贝原有属性并修改目标值
  filters: {
    ...currentSelection.filters,
    something: '你的新值'
  }
};

2. JSON序列化/反序列化（快速但有局限性）

这种方式适合没有特殊类型（比如函数、Symbol、循环引用）的简单对象：

const filters = JSON.parse(JSON.stringify(state.selection));
filters.filters.something = '你的新值';

⚠️ 注意：如果你的对象里包含函数、日期对象或者循环引用，这种方法会丢失数据或者报错，谨慎使用。

3. 第三方工具库（比如Lodash的cloneDeep）

如果你的状态结构复杂，嵌套层级多，可以用成熟的工具库来做深拷贝：

// 先安装lodash：npm install lodash.clonedeep
import { cloneDeep } from 'lodash.clonedeep';

const filters = cloneDeep(state.selection);
filters.filters.something = '你的新值';

额外提醒 #

在NgRx中处理状态时，一定要记住：任何对状态的修改都必须通过创建新对象来实现，不能直接修改原状态的任何引用。这样才能保证NgRx的变更检测、时间旅行等功能正常工作。

内容的提问来源于stack exchange，提问作者MartaGalve