Angular 15：NgRx strictActionImmutability与strictStateImmutability报错求助

以下是确保通过strictActionImmutability和strictStateImmutability检查的全部核心修改要点：

一、Action处理规则 #

• 所有Action的payload必须是不可变实例：若payload为对象/数组，必须传递深克隆后的版本（单层对象可用{...obj}，嵌套对象用structuredClone()或深克隆工具），禁止直接传递原始对象引用。
• 禁止在Action分发后修改payload：Action一旦创建并分发，任何代码都不能再修改其payload属性，哪怕是组件内临时操作也不行。

二、Reducer处理规则 #

• 必须返回全新的State对象：绝对不能直接修改传入的state参数，必须通过克隆+修改的方式生成新state：

  // 错误写法：直接修改原state
  state.user.name = 'newName';
  return state;
  
  // 正确写法：生成嵌套克隆的新对象
  return {
    ...state,
    user: { ...state.user, name: 'newName' }
  };
  

• 处理数组时必须返回新数组：禁止使用push()、splice()这类修改原数组的方法，改用map()、filter()、concat()或扩展运算符生成新数组：

  // 错误：修改原数组
  state.todos.push(newTodo);
  return state;
  
  // 正确：返回新数组
  return {
    ...state,
    todos: [...state.todos, newTodo]
  };
  

• 避免浅克隆嵌套对象：Object.assign()或单层扩展运算符仅能处理浅层级对象，嵌套较深的结构必须用深克隆保证引用完全隔离。

三、Selector处理规则 #

• 投影函数必须返回新对象/数组：不能直接返回state中的原始引用，即使是做筛选转换，也要生成新实例：

  // 错误：修改原对象后返回
  export const selectUserWithFullName = createSelector(
    selectUserState,
    (user) => {
      user.fullName = `${user.firstName} ${user.lastName}`;
      return user;
    }
  );
  
  // 正确：生成新对象返回
  export const selectUserWithFullName = createSelector(
    selectUserState,
    (user) => ({
      ...user,
      fullName: `${user.firstName} ${user.lastName}`
    })
  );
  

• 禁止在Selector中依赖外部可变状态：投影函数内不能修改组件变量或引用外部可变对象，必须保持纯函数特性。

四、其他易忽略场景 #

• Effects中保持数据不可变性：对后端返回的数据做修改时，必须先克隆再操作，将克隆后的对象作为Action payload分发。
• 组件内禁止修改Store返回的状态：从Store中select到的数据，哪怕是临时使用，也要先克隆再修改，避免污染原始state引用：

  // 正确写法：克隆后再操作
  this.user$ = this.store.select(selectUser).pipe(
    map(user => ({...user}))
  );
  

• 排查第三方库/工具函数：确保第三方库返回的数据、自定义工具函数返回的是不可变对象，避免传递带有可变引用的实例。
• 避免手动冻结对象：不要用Object.freeze()冻结state或payload，NgRx内部会处理不可变性，手动冻结会触发“无法扩展对象”类报错。

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