heroes-facade.service.ts

@Injectable({ 
  providedIn: 'root'
})
export class HeroesService {

  @Select(HeroesState)
  public data$: Observable<Hero[]>;

  constructor(
    private api: ApiService,
    private spinner: NgxSpinnerService
  ) { }

  @Dispatch()
  public addHero(name: string, saying: string) {
    return new AddHero({ id: AddHero.generateId(), name, saying });
  }

  @Dispatch()
  public deleteHero(id: string) {
    return new DeleteHero(id);
  }

  @Dispatch()
  public loadAll = () => {
    this.spinner.show();
    return this.api.getHeroes().pipe(
      map((heroes) => new AddHeroes(heroes)),
      finalize(() => this.spinner.hide())
    )
  };
}