@ngrx/store中带有计算的记忆选择器
@ngrx/store中带有计算的记忆选择器
提问于 2019-01-03 06:16:14
我的规范化ngrx商店如下所示：
export interface State {
carts: EntityState<Cart>;
items: EntityState<Item>;
}
export interface Cart {
id: number;
maxVolume: number;
}
export interface Item {
id: number;
cartId: number;
volume: number;
}这是一个非常基本的设置，购物车可以包含多个项目。我的选择器需要返回一个数组，其中包含所有包含其项的数组，但也需要计算条目是否有从各自的购物车中退出的危险：
export const select: MemoizedSelector<object, any> = createSelector(
selectAllCarts, selectAllItems,
(allCarts: Cart[], allItems: Item[]) => {
return allCarts.map(c => {
const items = allItems.filter(i => i.cartId == i.id);
return {
id: c.id,
items: items.map(i => {
// computations, should not run if cart's items have not changed
// needs to be memoized
const computed = isCartOverfilled(i, c, items);
return {
id: i.id,
mightFallOut: computed//computed value needs to be output
}
})
}
});
});每次项目更新时，isCartOverfilled都会为存储中的每一项运行。但是，isCartOverfilled可能很昂贵，并且只取决于购物车中的项目。当一项更新(例如被添加到购物车中)时，isCartOverfilled应该只对其中的项目执行，即由cart id回传。
我怎样才能做到这一点？
我试过从一辆手推车中选择物品：
export const selectCart = (cartId: number) => createSelector(
selectItemsByCartId(cartId), selectCartById(cartId),
(items: Item[], cart: Cart) => {
return {
id: cart.id,
items: items.map(i => {
const computed = isCartOverfilled(i, cart, items);
return {
id: i.id,
mightFallOut: computed
}
})
}
});这个选择器不会计算过多，但是我需要所有的推车，而且我不确定它是否可以用选择器完成。
回答 1
Stack Overflow用户
发布于 2019-01-03 06:52:34
由于状态已经更改，选择器将重新计算.。
但是，您可以使用为cart和保留另一个状态来实现，当您分派addCart项操作时，您可以使用单个项来更新购物车，而不是使用选择器。
export interface State {
carts: EntityState<Cart>;
cartOverFilled: SomeState or part of Cart State <---
items: EntityState<Item>;
}或
export interface State {
carts: EntityState<CartState>;
items: EntityState<Item>;
}
export interface CartState {
cart: Cart;
overFilled: any
}
export interface Cart {
id: number;
maxVolume: number;
}- 再添加一个带有值的状态，以检查超额填充；
- 为ofType“添加到购物车”创建一个效果
- 创建另一个操作来重新计算输入项已过填充的现有状态。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54024066
复制相似问题
带有ngrx/store的角度分页表
ngrx/store选择器返回[对象对象]
模拟ngrx/store
@ngrx角@ngrx/store-devtools
从@ngrx/db恢复@ngrx/store
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
