gpt4 book ai didi

ngxs - 选择器什么时候执行? ngxs

转载 作者:行者123 更新时间:2023-12-03 16:04:02 26 4
gpt4 key购买 nike

现场演示 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 操作时,我获得了新的浇头值。在我的控制台中,我有
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

我希望这有助于并解释问题。

关于ngxs - 选择器什么时候执行? ngxs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54821132/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com