What kind of persistence should I expect for values saved in NgRx store for an Angular...

export class AppComponent implements OnInit{

showFavorite : boolean = false;

products : Product[] = [];

favoritesProductsArray:FavoriteProduct[] = [];

constructor(private store:Store<FavoriteProductState>, private productService : ProductsService) {
this.productService.execute().subscribe((data=>{

this.products = data;

}));


}
ngOnInit(): void {
this.store.select(selectProducts).subscribe(data => this.favoritesProductsArray = data);
console.log('Favorite Products fetched from the store')
}

onClick(productroduct)
{

this.products = this.products.map(element => element.id === product.id ? {...element, isFavorite : true} : element);
this.store.dispatch(add({product}));
}


I am very new to Angular. After reading the documentation for ngRx what I understood was that NgRx stores data at application level. When I run the application and click a button on my AppComponent, the product gets added to the NgRx store and all is fine. However if I open the same page on a different browser window, I was expecting to see the data on the new Page but the products added from the first browser window were not available even when I subscribed again on button click for another button:

onClickShowFavorites() { this.store.select(selectProducts).subscribe(data => this.favoritesProductsArray = data); this.showFavorite = true; }

Continue reading...