Angular 14 NGRX Store内存泄漏及状态更新异常求助

核心问题分析 #

• 初始实现中组件维护本地basketPhoto数组，违背NGRx单一数据源原则，不仅容易导致状态不一致，还会因重复创建数组对象引发不必要的内存占用。
• 第二次修改的reducer存在两个致命错误：
  • state.push(basket)直接修改原状态数组，NGRx的状态默认是**不可变（只读）**的，因此会抛出"object is not extensible"错误。
  • 返回的{ ...state, Photo: state.push(basket) }把原本的数组状态改成了对象结构，完全偏离了预期的Photo[]类型。

正确实现步骤 #

1. 动作定义 #

定义添加单个商品的语义化动作，而非每次传递整个数组：

// basket.actions.ts
import { createAction, props } from '@ngrx/store';
import { Photo } from './your-photo-type-path';

export const addToBasket = createAction(
  '[Basket] Add Photo',
  props<{ photo: Photo }>()
);

2. Reducer实现 #

严格遵循不可变更新原则，通过创建新数组来更新状态，绝不修改原state：

// basket.reducer.ts
import { createReducer, on } from '@ngrx/store';
import { addToBasket } from './basket.actions';
import { Photo } from './your-photo-type-path';

// 初始状态保持只读，符合NGRx最佳实践
export const initialBasketState: ReadonlyArray<Photo> = [];

export const basketReducer = createReducer(
  initialBasketState,
  on(addToBasket, (state, { photo }) => {
    // 扩展原数组并添加新元素，返回全新数组（不可变更新）
    return [...state, photo];
  })
);

3. 组件调用 #

移除本地维护的数组，直接dispatch动作，通过Store订阅获取购物车状态：

// home-mobile.component.ts
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { selectBasket } from './basket.selectors';
import { addToBasket } from './basket.actions';
import { Photo } from './your-photo-type-path';

export class HomeMobileComponent implements OnInit {
  photos$ = this.store.pipe(select(selectPhotos));
  // 直接从Store订阅购物车状态，无需本地维护副本
  basket$ = this.store.pipe(select(selectBasket));

  constructor(private store: Store) { }

  ngOnInit(): void {
    this.store.dispatch(invokePhotosAPI());
  }

  AddToBasket(photo: Photo) {
    // 仅dispatch添加单个商品的动作，数组逻辑完全交给Reducer处理
    this.store.dispatch(addToBasket({ photo }));
  }
}

4. 可选：定义状态选择器（推荐） #

为了更优雅地获取购物车状态，创建专用选择器：

// basket.selectors.ts
import { createFeatureSelector, createSelector } from '@ngrx/store';
import { Photo } from './your-photo-type-path';

// 获取购物车feature的根状态
const selectBasketState = createFeatureSelector<ReadonlyArray<Photo>>('basket');

// 定义具体的购物车状态选择器
export const selectBasket = createSelector(
  selectBasketState,
  (state) => state
);

关键注意事项 #

• 单一数据源：所有状态由Store统一管理，组件不维护本地状态副本，彻底避免状态不一致和内存泄漏。
• 不可变更新：Reducer永远不能修改原状态，必须返回新的状态对象/数组，这是NGRx的核心原则，也是解决DevTools状态混乱的关键。
• 动作语义化：每个动作对应一个具体操作（如addToBasket），让DevTools的状态历史更清晰，便于调试。

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