Объект NGRX createSelector получает среднюю строку при создании специального селектора с фильтром (обновление до NGRX 2021)

Question

Привет, ребята, я создаю селектор, который фильтрует некоторые мысли из магазина, но когда я реализую это в селекторах, он создает строку на объекте.

Селектор работает правильно, но я вижу на нем среднюю линию, как будто что-то не на 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, string, IProduct[], DefaultProjectorFn<...>>' of 'createSelector' is deprecated.ts(6387)
selector.d.ts(32, 4): The declaration was marked as deprecated here.

Помните, это работает, но с этой строкой что-то не так.

Маленькая картинка

Answer 1

Как сказано в комментариях выше, селекторы с реквизитами устарели. Вам просто нужно переписать свой selector как factory selector

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