NGRX createSelector 对象在创建带有过滤器的特殊选择器时获得中间线更新至 NGRX 2021

问题描述

大家好，我正在创建一个选择器来过滤商店中的一些想法，但是当我在选择器上实现它时，它会在对象上创建一条线。

选择器工作正常，但我看到它的中间线好像不是 100% 好。

我该如何解决？感谢您的帮助！

product.selector.ts

export const getAllProducts = createSelector(getProductsstate,fromProduct.getAllProducts);

// createSelector with line in middle.
export const getProductsFilter = createSelector(
    getAllProducts,(products: IProduct[],filterData: string) => {

        if (filterData === '')
            return products;
        else
            return products.filter(value => value.name.includes(filterData) || value?.description.includes(filterData));

    }

);

来自家庭组件

      const data:string='data';
      this.subscription.push(this.store.pipe(select(getProductsFilter,data)).subscribe(....

所有使用 Ngrx && ngrx 创建的实体更新到最新版本 2021。

当我的鼠标在 createSelector 上显示该消息时

The signature '(s1: SelectorWithProps<object,string,IProduct[]>,projector: (s1: IProduct[],props: string) => IProduct[]): MemoizedSelectorWithProps<object,IProduct[],DefaultProjectorFn<...>>' of 'createSelector' is deprecated.ts(6387)
selector.d.ts(32,4): The declaration was marked as deprecated here.

记得是可以的，但是这条线感觉不对。

一张小图

解决方法

正如上面评论中所说的selectors with props are deprecated 您只需要将 selector 重写为 factory selector

export const getProductsFilter = (props: { filterData: string }) => 
  createSelector(
    getAllProducts,(products: IProduct[]) => {
      if (props.filterData === '')
          return products;
      else
          return products.filter(value => value.name.includes(props.filterData) || value?.description.includes(props.filterData));
   }
);