// Custom Component HTML
<button (click)="reRoute(1)">Select</button>
// Custom Component TypeScript
reRoute(id: any) {
this.store.select(fromStore.getBasketEntities).subscribe(data => {
const dynamicUrl = id + '_' + Object.keys(data).length; // dynamically construct new URL
this.store.dispatch(new fromStore.AddItem(id)); // Add item to store
// this.router.navigate(['quote/details/' + dynamicUrl], {
// queryParams: { type: 'product' }
// });
});
}
I am facing an issue where the console output gets stuck in an infinite loop, continuously displaying the dynamicUrl as 1_0, then 1_1, followed by 1_2, and so forth. Each click of the button results in multiple items being added to the store.
My objective is to add an item on each button click while obtaining the current number of items in the store. Initially, the count is 0 and is appended to the item in the store. Consequently, the first item will have an index of 1_0. Subsequent clicks on the button will add items with indexes such as 1_1, 1_2, and so on.
I would greatly appreciate any assistance as this seemingly simple task has consumed several hours of my time.
UPDATE: I switched the dynamicUrl back to id but encountered the same issue. My intention is to navigate to the added item immediately after clicking the button - for instance, the route for the first ever added item should be /details/1_0/. Subsequent routes will involve retrieving the item from the store and displaying its details.
I wanted to provide this additional context to give a comprehensive overview of my objectives. Thank you.
UPDATE_2: I have now moved the dispatch outside of the subscribe function, which resolved the issue of continuously adding items to the store. However, I am still receiving two console logs every time the button is clicked - first displaying 4_0 and then 4_1. I am now considering how to manage the router.navigation.
reRoute(id: any) {
this.store.select(fromStore.getBasketEntities).subscribe(data => {
const dynamicUrl = id + '_' + Object.keys(data).length; // dynamically construct new URL
console.log(dynamicUrl); // debug
// this.router.navigate(['quote/details/' + dynamicUrl], {
// queryParams: { type: 'product' }
// });
});
this.store.dispatch(new fromStore.AddItem(id)); // add item to store
}