添加到ngrx存储时的rxjs无限循环

Question

// component.html
<button (click)="reRoute(1)">Select</button>
// component.ts
reRoute(id: any) {
this.store.select(fromStore.getBasketEntities).subscribe(data => {
const url = id + '_' + Object.keys(data).length; // contruct new url
this.store.dispatch(new fromStore.AddItem(id)); // EDIT: add item to store
// this.router.navigate(['quote/details/' + url], {
//   queryParams: { type: 'product' }
// });
});
}

我有上面的内容，它导致控制台进入一个无限循环，在1_0中输出url，然后输出1_1、1_2等等。单击按钮"一次"即可将多个项目添加到我的存储中。。

我想做的是在每次点击时添加一个项目，但每次都要获取我商店中的项目数量。最初为0，并将其附加到存储中的项目中。第一个项目的索引为1_0。下次我点击按钮时，会添加另一个项目，索引为1_1，依此类推

非常感谢您的帮助。接缝很直，但这让我忙了几个小时…

编辑：我将url更改为id。同样的问题也会发生。我想在点击后直接路由到添加的项目，所以对于添加的第一个项目，路由将是/details/1_0/。然后，该路线具有从商店检索商品并显示其详细信息的逻辑。

我只是想加上这一点来完成我想要实现的目标。感谢

EDIT_2:我将dispatch移到了订阅之外，这解决了将项目继续添加到商店的问题，但我仍然在每个按钮上获得2个控制台日志，第一次单击按钮时单击4_0，然后单击4_1。我现在想知道我将如何处理router.navigation

reRoute(id: any) {
this.store.select(fromStore.getBasketEntities).subscribe(data => {
const url = id + '_' + Object.keys(data).length; // contruct new url
console.log(url); // debug
// this.router.navigate(['quote/details/' + url], {
//   queryParams: { type: 'product' }
// });
});
this.store.dispatch(new fromStore.AddItem(id)); // add item to store
}

Answer 1

您正在使用订阅商店状态的一部分

this.store.select(fromStore.getBasketEntities)

这意味着每当篮子实体发生变化时，subscribe内部的函数就会被执行。我假设AddItem操作确实修改了存储区的这一部分，这意味着它将重新触发select，依此类推

您应该只在具有id作为有效负载的click事件中调度AddItem操作。在reducer函数中，您可以计算url。

reRoute(id: any) {
this.store.dispatch(new fromStore.AddItem(id));
}