не могу отписаться от моего вызова селектора ngrx

Question

У меня есть следующий код

selectProduct(id){
    const sub = this.store$.select(ProductStoreSelector.selectProductByID(id)).subscribe((product) => {
      this.store$.dispatch(new ProductStoreAction.SetSelectedProduct({productID: product.id}));
      sub.unsubscribe();
    });
}

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

export const featureAdapter: EntityAdapter<IProduct> = createEntityAdapter<IProduct>({
  selectId: model => model.id,
});
export const selectAllProducts: (state: object) => Array<IProduct> = featureAdapter.getSelectors(selectProductsState).selectAll;
export const selectProductByID = (id: string) => createSelector(
  selectAllProducts,
  (products) => products.find((product) => product.id === id)
);

и мой магазин является предприятием с одним выбранным

export interface State extends EntityState<IProduct> {
  selectedProduct: IProduct;
}

но проблема в том,

Несмотря на то, что я вернул свой productId, я не могу отписаться от sub.unsubscribe(), потому что он не определен.

Answer 1

Вы можете использовать take (1), чтобы прослушивать значения только один раз.В противном случае попробуйте отписаться, как показано ниже:

selectProduct(id){
   this.store$.select(ProductStoreSelector.selectProductByID(id)).subscribe((product) => {
      this.store$.dispatch(new ProductStoreAction.SetSelectedProduct({productID: product.id}));
    }).unsubscribe();
}

с использованием take (1):

    selectProduct(id){
           this.store$.select(ProductStoreSelector.selectProductByID(id))
                .take(1)
                .subscribe((product) => {
                   this.store$.dispatch(new ProductStoreAction.SetSelectedProduct({productID: product.id}));
            });
        }