ngxs - 选择器什么时候执行?ngxs
问题描述
现场演示https://stackblitz.com/edit/angular-vw78jf
我的 ngxs 状态中有 ToppingsStateModel
export interface ToppingsStateModel {
entities: { [ id: number ]: Topping };
selectedToppings: number[];
}
一项操作更改了我的实体列表,另一项操作更改了 selectedToppings。在 products.component 我从选择器中获取浇头列表
export class ToppingsState {
constructor(private toppingsService: ToppingsService) {
}
@Selector()
static entities(state: ToppingsStateModel) {
console.log('getEntities', state.entities);
return state.entities;
}
@Selector([ToppingsState.entities])
static toppings(state: ToppingsStateModel, entities: {[id: number]: Topping}): Topping[] {
return Object.keys(entities).map(id => entities[parseInt(id, 10)]);
}
...
}
它是 product.component
export class ProductsComponent implements OnInit {
@Select(ToppingsState.toppings) toppings$: Observable<Topping[]>;
constructor(private store: Store, private actions$: Actions) {}
ngOnInit() {
const state = this.store.dispatch(new LoadToppings());
setTimeout(() => this.store.dispatch(new VisualizeToppings([1])), 2000);
this.toppings$.subscribe((toppings) => {console.log('UUUU NEW TOPPINGS!!!')});
}
}
当我调度 VisualizeToppings 操作时,我得到了新的 toppings 值。在我的控制台中,我有
action [Products] Load Toppings @ 10:57:59.735
getEntities {}
UUUU NEW TOPPINGS!!!
getEntities {1: {…}, 2: {…}}
UUUU NEW TOPPINGS!!!
action [Products] Visualize Toppings @ 10:58:01.744
getEntities {1: {…}, 2: {…}}
UUUU NEW TOPPINGS!!!
我改变了状态的另一部分。当我调度 VisualizeToppings 操作时,为什么选择器会再次执行?我做错了什么?
解决方案
@Selector
容器状态类的模型始终假定为第一个参数存在一个已知问题。见:https ://github.com/ngxs/store/issues/386#issuecomment-395780734
这是您的问题...由于第一个参数,您的选择器依赖于状态模型ToppingsStateModel
和指定的ToppingsState.entities
选择器。
@Selector([ToppingsState.entities])
static toppings(state: ToppingsStateModel, entities: {[id: number]: Topping}): Topping[] {
return Object.keys(entities).map(id => entities[parseInt(id, 10)]);
}
这会导致在 ToppingsStateModel 的任何部分发生更改时重新计算选择器。作为一种解决方法,您可以将选择器移动到不是 State 类的另一个类并删除第一个参数。我将这些称为查询类。这被称为元选择器,请参阅此处的文档:https ://ngxs.gitbook.io/ngxs/concepts/select#meta-selectors
这将作为 NGXS v4 中重大更改的一部分进行修复(请参阅https://github.com/ngxs/store/issues/827),目前有一个 PR 用于在 NGXS v4 到来之前更改此行为的功能标志。见:https ://github.com/ngxs/store/pull/858
我希望这有助于并解释问题。
推荐阅读
- visual-studio-code - Where is Git: Add Remote command?
- mongodb - 转储和恢复 mongo 数据库的问题
- animation - 三.JS | glTF Morphing 针对 glTF 问题
- angular - 谷歌时间线图表使用不显示角度的完整行标签
- jquery - Blueimp jQuery 文件上传与 ASP.NET Core 3.1 不兼容
- c - C 函数声明中的混淆语句
- python-3.x - 创建有效 ssn 的列表
- xml - 在 xml 有效负载中重新替换标记值
- android - java.lang.IllegalStateException:无法为 RecyclerView 创建层
- python - dict中数据帧的大小