Reset ReplaySubject value

I have such file structure:

  • facade.ts
  • state.ts
  • component.ts

In facade I have:

...
getArticles(): Observable<Article> {
  return this.articleService.fetchAll();
}
...

In state I have:

...
triggerArticlesFetch$ = new ReplaySubject<void>(1);

articles$ = this.triggerArticlesFetch$.pipe(
  switchMap(() => this.fc.getArticles()),
  shareReplay(1)
);

loadArticles(): void {
  this.triggerArticlesFetch$.next();
}

getArticles(): Observable<ArticleShare[]> {
  return this.articles$;
}
...

and finally in component I have:

...
`
  <span> {{ articles$ | async | json }} </span>
`
...
...
articles$: Observable<Article> = this.st.getArticles();

ngOnInit() {
  this.st.loadArticles();
}
...

But I have some issues with ‘invalidating’ this data (component is reusable – and state contains previous data).

What is the best way to clear/reset to []/null articles$ (probably in state file) everytime I call loadArticles() ?

Source: Angular Questions