Compressing View Logic with Facades

books-page.component.ts

/**
 *
 * Snippet from blog article:  https://auth0.com/blog/ngrx-facades-pros-and-cons/
 *
 */

@Component({
  selector: 'abl-books-page',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <mat-card>
      <mat-card-title>My Collection</mat-card-title>
      <mat-card-actions>
        <button mat-button raised color="accent" (click)="logout()">Logout</button>
      </mat-card-actions>
    </mat-card>
    <abl-book-preview-list [books]="books$ | async"></abl-book-preview-list>
})
export class BooksPageComponent implements OnInit {
  books$: Observable<Book[]>;

  constructor(private booksFacade: BooksFacadeService) {
    this.books$ = booksFacade.allBooks$;
  }

  ngOnInit() {
    this.booksFacade.dispatch(new BooksPageActions.Load());
  }
}
    
    
    

export class BooksPageComponent implements OnInit {
  books$: Observable<Book[]> = this.facade.allBooks$;

  constructor(private facade: BooksFacadeService) {  }
}

vs

export class BooksPageComponent implements OnInit {
  books$: Observable<Book[]> = this.store.select(getAllBooks);

  constructor(private store: Store<{}>) {  }
}

How is it any different other than another layer of BooksFacadeService which literally does the same thing.

View components never know about this complexity.

View components never know about the complexity behind selectors as well - they just consume them. Selectors are already the abstraction and encapsulation layer.

I would've done

export class BooksPageComponent {
  constructor(public facade: BooksFacadeService) {  }
}

and

<abl-book-preview-list [books]="facade.allBooks$ | async"></abl-book-preview-list>

Even simpler! Thanks for bringing us this awesome pattern, Thomas!