Angular NgRx更新Store对象属性时遇只读属性错误求助

错误原因 #

1. 直接修改不可变对象：NgRx强制要求状态（state）不可变，你虽然通过[...state.products]复制了数组，但数组内的对象仍是原引用，直接修改list[index].blend_name会触碰原state中的只读对象（可能是Angular HttpClient返回的响应被自动冻结，或是NgRx的状态保护机制导致）。
2. 返回错误的状态值：UPDATE_PRODUCT_LIST分支中，你最终返回的是{ products: action.payload }，但action.payload只是单个更新对象，并非完整产品列表，这会直接覆盖整个products数组，逻辑完全错误。

修复后的Reducer代码 #

export function reducer(state = postInitialState, action: actions.Actions) {
  let updatedList;
  switch (action.type) {
    case actions.actionType.GET_PRODUCT_LIST_SUCCESS: {
      // 对返回的产品对象做浅拷贝，避免后续操作触发只读限制
      return {
        ...state,
        products: action.payload.map(product => ({...product}))
      };
    }
    case actions.actionType.UPDATE_PRODUCT_LIST: {
      updatedList = state.products.map(product => {
        if (product.uid === action.payload.uid) {
          // 创建新对象并更新属性，严格遵循不可变原则
          return {...product, blend_name: action.payload.blend_name};
        }
        return product;
      });
      // 返回包含更新后数组的新状态对象
      return {
        ...state,
        products: updatedList
      };
    } 
    default: {
      return state;
    }
  }
}

关键修复点说明 #

• 严格遵守不可变性：使用数组map方法遍历列表，找到目标对象时，通过对象展开运算符{...product, blend_name: ...}创建新对象，确保原state中的对象不会被直接修改。
• 修正状态返回逻辑：返回的是包含完整更新后列表的新state，而非错误地用单个更新对象覆盖整个产品数组。
• 前置防御性处理：在GET_PRODUCT_LIST_SUCCESS中对每个产品对象做浅拷贝，提前避免后续操作触发只读属性限制。

额外优化建议 #

• 不要用any类型定义action的payload，建议定义明确的接口（如interface UpdateProductPayload { uid: string; blend_name: string }），提升类型安全性。
• 订阅store时优先使用async管道，或手动取消订阅，避免内存泄漏。

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