2

我有基于以下模型的@ngrx 实体：

export interface Product {
  id: number;
  code: string;
  text: string;
  brand: any;
  quantity_available: number;
  rate: number;
  // ... other variables
}

export interface BasketProduct {
  id: number; /*Product ID*/
  quantity: number;
  rate: number;
  value: number;
}

我将用户的配置文件存储在设置状态中，并将选定的过滤器（来自 UI）存储在产品状态中：

export interface State extends EntityState<Setting> {
  // additional properties here
  user: {
    currency: {
      code: string,
      name: string,
    }
  };
}

export interface State extends EntityState<Product> {
  // additional properties here
  filters: {
    just_arrived: boolean;
    newly_launched: boolean;
    discounted: boolean;
    celebrity: boolean;
    niche: boolean;
    wish_list: boolean;
    search_text: string;
    brands;
    product_types;
    parent_companies;
  };
}

我的减速器的摘录是这样的：

export const selectAllProducts = createSelector(
  selectProductState,
  fromProduct.selectAllProducts
);

export const selectBasketProductEntities = createSelector(
  selectBasketState,
  fromBasket.selectBasketProductEntities
);

export const selectUserProfile = createSelector(
  selectSettingState,
  fromSetting.selectUserProfile
);

export const selectAllFilters = createSelector(
  selectProductState,
  fromProduct.selectAllFilters
);

然后，我创建了一个选择器，用于合并来自上述选择器的数据：

// Returns the List of Products after applying Filters
    export const selectFilteredProducts = createSelector(
      selectAllProducts,
      selectAllFilters,
      selectBasketProductEntities,
      selectUserProfile,
      (products, filters, basket, userProfile) => {
        // Step 1: Filter the Products based on the Parameters
        const filtered = products.filter(
          product =>
            ((filters.just_arrived === false) ||
            (product.is_just_arrived === 1 && filters.just_arrived === true)) &&
            // ..... Additional Filters
        );

        // Step 2: Map the Quantity Selected / Currency Information
        return filtered.map(product => Object.assign({}, product, {
          quantity_selected: basket[product.id],
          currency: userProfile.currency.code
        }));
      }
    );

该解决方案运行良好，但每当将产品添加到购物篮时，我的整个产品列表都会重新初始化（可能是因为我正在使用地图重新分配产品）。随着产品列表的增长，这可能会产生性能问题。我想将更改检测限制为仅发生更改的产品。

我在 createSelector 中的 map / filter 实现是否正确？我怎样才能提高性能？

4

1 回答 1

0

抱歉，但我没有看到其他明显的解决方案。如果它是一个篮子，通常它不会包含数千件物品。不？如果是，也许您应该考虑使用后端进行过滤。

但是，在 Angular 更改检测期间，性能可能会受到影响。所以你可以通过提供一个trackBy函数来改进。

<li *ngFor="let item of collection;trackBy: trackByFn">{{item.id}}</li>

看到这个帖子。

另一方面，为了更好的可读性，您可以编写：

return filtered.map(product => {
      ...product,
      quantity_selected: basket[product.id],
      currency: userProfile.currency.code
    }));
于 2018-06-13T16:01:36.933 回答