How should we handle factory selectors driven from component @Input

[eggbeard]

The discussions of moving to factory selectors discuss the case of using static parameters

class CustomerComponent {
  customer$ = this.store.select(customers.selectCustomer(47));
}

but not the case when we want to parameterize our selectors based upon an input to the component

class CustomerComponent {
  @Input id: number | undefined;
  customer$ = this.store.select(customers.selectCustomer(this.id));
} 

When using parameters from an @Input we have to deal with the value being initially undefined, and of course with the possibility of it changing. This rapidly becomes clumsy to manage. Surprisingly I didn't encounter any solution to this case as a recipe encountered by others. What's everybody else doing?

In my use case the component is part of a list and so using some 'current' id selected from the store, or the router doesn't really work. I could build an uber selector at a root level and pass in the fully hydrated object, but that's pretty expensive, and a lot of logic to pull into a single place. It also means I have to be wary of re-rendering a list of items, in which only the content of a single item changed, rather than the list.

[kategable]

I usually change input to be a set/get and handle unidentified in the selector. Would love to hear what others are doing.

[e-oz]

@Input() set id(id: number) {
    if (id != null) {
        this.id$.next(id);
    }
}

protected readonly id$ = new ReplaySubject<number>(1);

and use this.id$ observable.

[eggbeard]

So to flesh this answer out a bit we end up with components like:

class CustomerComponent {
  @Input() set customerId(customerId: number) {
    if (Number.isInteger(customerId)) {
      this.customerId$.next(customerId);
    }
  };

  protected readonly customerId$ = new ReplaySubject<number>(1);

  customer$ = this.customerId$.pipe(
    switchMap(customerId => this.store.pipe(
      select(selectCustomerById(customerId))
    )),
    shareReplay()
  );

  constructor(public store: Store) {
  }
} 

Works well with ngrxPush, but lots of plumbing, especially if you have components with multiple @Input parameters

<ng-container *ngIf="customer$ | ngrxPush as customer">
  <!-- Do things with customer here -->
</ng-container>