movies_with_error.component.ts

@Component({
  selector: 'app-movies-page',
  template: `
    <h1>Movies Page</h1>
    <div *ngIf="error$ | async as error">
      {{ error }}
    </div>
    <button (click)="reload()">Refresh List</button>
  `
})
export class MoviesPageComponent {
  error$: BehaviorSubject<string>;

  constructor(
    private store: Store<fromRoot.State>,
    actions$: Actions,
  ) {
    this.error$ = new BehaviorSubject<string>('');
    actions$.pipe(
      ofType('[Movies/API] Load Movies Failure'),
    ).subscribe(this.error$);
      
   this.store.dispatch({ type: '[Movies Page] Load Movies' });
  }

  reload() {
    this.error.next('');
    this.store.dispatch({ type: '[Movies Page] Load Movies' });
  }
}