Facades and Smart/Dumb Components

Smart components fetch data and delegate rendering to presentational dumb components, separating concerns.

Smart Component (Container)

@Component({
  selector: 'app-user-list-container',
  template: `<app-user-list [users]="users()" (select)="onSelect($event)"></app-user-list>`,
})
export class UserListContainerComponent {
  private store = inject(Store);

  users = toSignal(this.store.select(selectUsers), { initialValue: [] });

  onSelect(user: User): void {
    this.store.dispatch(selectUser({ id: user.id }));
  }
}

Dumb Component (Presentational)

@Component({
  selector: 'app-user-list',
  template: `
    <div *ngFor="let user of users">
      <p>{{ user.name }}</p>
      <button (click)="select.emit(user)">Select</button>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class UserListComponent {
  @Input() users: User[] = [];
  @Output() select = new EventEmitter<User>();
}

Benefits

A facade service exposes one API to components while hiding NgRx or HTTP plumbing.

Facade Service

@Injectable({ providedIn: 'root' })
export class UserFacade {
  private store = inject(Store);

  // State
  users = toSignal(this.store.select(selectUsers), { initialValue: [] });
  loading = toSignal(this.store.select(selectLoading), { initialValue: false });
  error = toSignal(this.store.select(selectError), { initialValue: null });

  // Actions
  loadUsers(): void {
    this.store.dispatch(loadUsers());
  }

  addUser(user: CreateUserRequest): void {
    this.store.dispatch(addUser({ user }));
  }

  deleteUser(id: number): void {
    this.store.dispatch(deleteUser({ id }));
  }

  selectUser(id: number): void {
    this.store.dispatch(selectUser({ id }));
  }
}

Component Using Facade

@Component({
  selector: 'app-user-page',
  template: `
    <div *ngIf="facade.loading()">Loading...</div>
    <div *ngIf="facade.error() as error">{{ error }}</div>
    <app-user-list
      [users]="facade.users()"
      (select)="facade.selectUser($event.id)">
    </app-user-list>
    <button (click)="facade.loadUsers()">Refresh</button>
  `,
})
export class UserPageComponent {
  facade = inject(UserFacade);
}

Facade Benefits

1. Simplified components — No direct store or HTTP access
2. Centralized state access — All state reads go through the facade
3. Easy to test — Mock the facade instead of the store
4. Refactoring freedom — Change store implementation without touching components