Angular独立API集成Ngrx报错：products.reduce is not a function

这个错误的核心原因是你在调用reduce时，products的值是undefined，而非预期的数组。下面是具体排查点和解决办法：

1. 检查Reducer的初始状态 #

这是最常见的问题根源——你可能没给products初始化一个空数组。确保Reducer的初始状态明确设置products为[]：

export interface CartState {
  products: Product[];
}

// 必须初始化products为空数组，不能留空或设为undefined
export const initialState: CartState = {
  products: []
};

export const cartReducer = createReducer(
  initialState,
  on(addToCart, (state, { product }) => ({
    ...state,
    products: [...state.products, product]
  }))
);

2. 验证状态选择器的路径 #

检查你用来获取购物车商品的选择器，确保它正确指向状态树中的products节点，没有路径错误：

export const selectCartState = createFeatureSelector<CartState>('cart');
export const selectCartProducts = createSelector(
  selectCartState,
  // 确认state结构和属性名完全匹配，不要写错products的拼写
  (state) => state.products
);

3. 排查Reducer的Action处理逻辑 #

确保所有Action的处理分支都返回完整的状态对象，且products始终是数组类型。比如删除商品的逻辑不能漏掉返回products：

// 错误示例：忘记返回products，导致状态中的products变为undefined
on(removeFromCart, (state, { id }) => ({
  ...state
}))

// 正确写法：返回过滤后的products数组
on(removeFromCart, (state, { id }) => ({
  ...state,
  products: state.products.filter(p => p.id !== id)
}))

4. 确认Store的配置正确性 #

在main.ts的独立API配置中，要确保正确注册了你的Cart Reducer，状态树中存在对应的节点：

bootstrapApplication(AppComponent, {
  providers: [
    provideStore({
      // 这里的键名要和选择器中createFeatureSelector的参数一致（比如'cart'）
      cart: cartReducer
    })
  ]
});

5. 组件中添加兜底处理（可选） #

为了避免极端情况的报错，可以在组件的数据流中给products加兜底默认值：

this.totalItems$ = this.store.select(selectCartProducts).pipe(
  map(products => (products || []).reduce((total, item) => total + item.quantity, 0))
);

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