如何实现NgRx效果根据产品价格有条件触发模态框?

问题描述 投票:0回答:1

使用NgRx状态管理我想检查产品的成本是否超过10,然后 如果产品价值超过10,我想展示

sval 

(sweetalert)元素。

reducer.ts 

我有

public interface IProductsList{
items: IProductListItem[]
}

public interface IProductListItem{
price: int;
name: string
}

所以我创建动作:

export const openPriceModal = createAction('[Products]')
export const openPriceModalSuccess = createAction('[Products]')
export const openPriceModalFailed = createAction('[Products]')

在减速器中我有选择器:


export interface IProductsRequestState {
selectedItem: IProductListItem
list: IProductsList
}

export const getSelectedProductsRequestList = createSelector(getSelectedProductsRequestList , state => state.list)
export const getSelectedProductsRequest = createSelector(getSelectedProductsRequest, state => state.selectedItem )

现在我想编写effect.ts,根据价格打开一个模态:

openPriceModal = createEffect(() => this.action$.pipe(ofType(openPriceModal), withLatestForm(() => {
..
})))

如果不是为了店铺管理,我会这样写:

  1. 获取物品清单
  2. 遍历该商品的列表并比较价格属性。
  3. 根据结果返回一个元素。

但我不知道如何使用 NgRx 来实现它。

所有逻辑都必须位于 NgRx 内部,并且任何逻辑都不应位于组件中。

angular ngrx store
1个回答
0
投票

您可以使用选择器来实现这一点。 因此,您可以创建一个自定义选择器来检查产品的成本是否超过 10。

示例:

//选择器.ts

export const getSelectProductOver10 = createSelector(
  getSelectedProductsRequestList,
  (product) => product.items.length > 10,
);

//效果.ts

  openPriceModal = createEffect(
    () =>
      this.action$.pipe(
        ofType(openPriceModal),
        withLatestFrom(this._store.pipe(select(getSelectProductOver10))),
        map(([, isOver10]) => {
          if (isOver10) {
            // call the service to open the modal (sweetalert)
            ....
          }
       .....
© www.soinside.com 2019 - 2024. All rights reserved.