使用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(() => {
..
})))
如果不是为了店铺管理,我会这样写:
但我不知道如何使用 NgRx 来实现它。
所有逻辑都必须位于 NgRx 内部,并且任何逻辑都不应位于组件中。
您可以使用选择器来实现这一点。 因此,您可以创建一个自定义选择器来检查产品的成本是否超过 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)
....
}
.....