基于Spartacus实现加载更多时Observable旧数据丢失问题求助

问题根源 #

Spartacus默认的SearchProducts action触发后，对应的NgRx reducer会直接替换现有产品列表数据，而非追加新数据，所以调用getPageItems加载下一页时，旧数据会被覆盖。

解决方案 #

方案1：修改NgRx Reducer（全局生效） #

如果项目多个页面都需要加载更多功能，建议修改产品搜索的reducer逻辑，让它在加载非第一页数据时自动合并新旧产品：

找到负责处理产品搜索结果的reducer（通常在product.reducer.ts），修改SearchProductsSuccess action的处理逻辑：

case ProductActions.SearchProductsSuccess.TYPE:
  // 判断当前是否为加载更多请求（currentPage > 1）
  const shouldAppend = action.payload.pagination?.currentPage > 1;
  const updatedProducts = shouldAppend 
    ? [...state.products, ...action.payload.products] 
    : action.payload.products;

  return {
    ...state,
    products: updatedProducts,
    pagination: action.payload.pagination, // 保留分页信息更新
    // 其他原有状态字段
  };

这样每次加载下一页时，新数据会自动追加到旧数据后面，model$会直接返回合并后的完整列表。

方案2：组件层面合并数据（局部生效） #

如果仅需在单个组件实现加载更多，不想修改全局reducer，可以在组件内通过RxJS操作符合并数据流：

1. 在组件中定义合并后的产品Observable：

import { scan } from 'rxjs/operators';

// 假设model$的类型是Observable<{ products: Product[], pagination: Pagination }>
this.combinedProducts$ = this.model$.pipe(
  scan((accumulatedProducts, currentData) => {
    // 第一页或新搜索请求（如切换关键词）时重置数据
    if (currentData.pagination.currentPage === 1) {
      return currentData.products;
    }
    // 加载更多时追加新数据
    return [...accumulatedProducts, ...currentData.products];
  }, [] as Product[])
);

2. 模板中使用combinedProducts$代替原model$渲染产品列表：

<ng-container *ngIf="combinedProducts$ | async as products">
  <div *ngFor="let product of products">
    <!-- 产品内容 -->
  </div>
</ng-container>

优化getPageItems函数 #

原函数中手动unsubscribe可能导致路由数据未获取就取消订阅，改用take(1)操作符更安全：

import { take } from 'rxjs/operators';

getPageItems(pageNumber: number): void {
  this.routing
    .getRouterState()
    .pipe(take(1)) // 仅取一次路由数据后自动取消订阅
    .subscribe((route) => {
      const routeCriteria = this.getCriteriaFromRoute(
        route.state.params,
        route.state.queryParams
      );
      const criteria = {
        ...routeCriteria,
        currentPage: pageNumber,
      };
      this.search(criteria);
    });
}

注意事项 #

• 加载更多时，确保除currentPage外，其他搜索条件（关键词、分类、排序等）与之前一致，否则会触发新搜索请求，需重置数据。
• 若使用分页组件，要同步更新分页状态（如总页数、当前页），避免用户重复加载同一页。

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