Angular中基于RxJS BehaviorSubject做状态管理，删除商品点返回数据丢失排查

问题原因 #

• 多数据源不同步：cart.store.ts中同时维护了private items: Product[]和cartItems$ BehaviorSubject两个数据源，调用setCart()方法时仅更新了cartItems$的 emit 值，没有同步更新items数组。后续调用setSingleItem()时会基于初始为空的items数组做推送，直接覆盖之前存入cartItems$的购物车数据，是数据丢失的核心诱因。
• deleteCart方法逻辑错误：
  1. 每次调用deleteCart()都会新增一个未销毁的cartItems$订阅，多次调用后会产生内存泄漏，且后续cartItems$有新值推送时会重复触发删除逻辑，导致数据异常。
  2. 仅用splice原地修改了订阅拿到的数组引用，没有调用cartItems$.next()推送新值，BehaviorSubject不会主动通知订阅者更新，同时原地修改引用的操作不符合不可变状态管理的规范，容易产生隐性问题。
• 组件拉取逻辑无效：cart.component.ts的getCartItems()中判断!this.cartItems?.length才拉取数据，但代码全程没有给this.cartItems赋值，该判断永远为真，点击浏览器返回按钮触发组件重新初始化时，一定会重新发起拉取购物车的请求。如果删除操作未成功同步到后端，或者WebSocket拉取请求拿到了旧数据，就会直接覆盖前端正确的状态。
• WebSocket监听逻辑隐患：cart.service.ts的getCart()方法每次调用都会新增CART_EVENTS.GET_CART_ITEMS事件监听，如果receivedJustSingleValue没有在拿到单次返回后自动销毁监听，会导致重复触发回调、内存泄漏等问题，进一步引发数据异常。

修复方案 #

1. 重写cart.store.ts，统一数据源 #

移除冗余的items数组，所有操作基于BehaviorSubject做不可变更新，避免多数据源不同步问题：

// cart.store.ts
private cartItems$ = new BehaviorSubject<Product[]>([]); // 初始值改为空数组而非null，避免空指针报错

// 获取购物车可观察对象
getCart() {
  return this.cartItems$.asObservable();
}

setCart(cartItems: Product[]) {
  // 做一次浅拷贝，避免外部修改传入的数组引用影响内部状态
  this.cartItems$.next([...cartItems]);
}

setSingleItem(item: Product) {
  // 不可变更新：基于当前值生成新数组再推送
  const currentItems = this.cartItems$.value;
  this.cartItems$.next([...currentItems, item]);
}

deleteCart(item: Product) {
  // 直接取当前值，不需要订阅，删除后推送新数组
  const currentItems = this.cartItems$.value;
  const index = currentItems.findIndex(i => i.upc === item.upc);
  if (index === -1) return; // 处理找不到商品的边界情况
  // 不可变更新，不用splice原地修改
  const newItems = [...currentItems.slice(0, index), ...currentItems.slice(index + 1)];
  this.cartItems$.next(newItems);
}

2. 修复cart.component.ts拉取和计算逻辑 #

移除无效判断，通过订阅cartItems$自动计算总价，保证状态联动：

// cart.component.ts
totalPrice$ = this.cartStore.getCart().pipe(
  map(items => items.reduce((sum, item) => sum + item.price, 0))
); // 用异步管道直接渲染总价，自动更新

ngOnInit() {
  this.getCartItems();
  this.cartItems$ = this.cartStore.getCart();
}

getCartItems() {
  // 仅当购物车为空时才拉取，判断基于store的当前值，而非组件内部冗余变量
  if (!this.cartStore.getCart().value?.length) {
    const payload = this.localStorageService.getData(LOCAL_STORAGE_KEY.PHONE);
    this.cartService.getCart(payload).then((res) => {
      if (Array.isArray(res)) {
        this.cartStore.setCart(res);
      }
    }).catch(err => console.error('拉取购物车失败', err));
  }
}

3. 修正删除操作的执行顺序 #

确保调用后端删除接口成功后，再调用cartStore.deleteCart()更新前端状态，避免前后端数据不一致：

// 示例删除触发逻辑
async onDeleteItem(item: Product) {
  try {
    await this.cartService.deleteCart(item); // 先调用后端删除接口
    this.cartStore.deleteCart(item); // 接口成功后再更新前端状态
  } catch (err) {
    console.error('删除失败', err);
  }
}

4. 修复WebSocket逻辑隐患 #

确认socketService.receivedJustSingleValue方法在拿到单次事件返回后，会自动销毁对应的事件监听，避免重复回调和内存泄漏。

内容的提问来源于stack exchange，提问作者Package.JSON