Using @select decorator with @Input

[mattduggan]

This is a...

• [ ] feature request
• [ ] bug report
• [x] usage question

What toolchain are you using for transpilation/bundling?

• [x] @angular/cli
• [ ] Custom @ngTools/webpack
• [ ] Raw ngc
• [ ] SystemJS
• [ ] Rollup
• [ ] Other

Environment

NodeJS Version: 10.15.1 Typescript Version: 3.2.2 Angular Version: 7.2.10 @angular-redux/store version: 9.0.0 @angular/cli version: (if applicable) 7.3.5 OS: macOS

Notes

I have a 'normalized' state shape where entities are indexed by id.

The entities are rendered in a list, which is controlled by a form of filters and sort options.

I'm using Epics to observe the form actions to update an array of filtered, sorted entity ids.

interface Entity {
  id: string,
  name: string
}

interface State {
  entities: { [id: string]: Entity },
  entityListIds: Array<string>
}

@Component({
  selector: 'entity-list',
  template: `
    <ng-container *ngIf="entityListIds$ | async as entityListIds;">
      <entity *ngFor="let entityId in entityListIds" [entityId]="entityId"></entity>  
    </ng-container>
  `
});
export class EntityListComponent {
  @select('entityListIds') entityListIds$: Observable<Array<string>>;
}

Can the EntityComponent use the entityId input with the @select decorator?

export class EntityComponent {
  @Input() entityId: string;
  @select(['entities', this.entityId]) entity$: Observable<Entity>;
}

I'm wondering if this is possible with instance methods/properties or if I have to inject the store. I'm also interested in scenarios where the input changes, and how to handle that with the select pattern.

[Fedejp]

Having similar issues here. I don't think what you're asking for is possible, i'd do sth like

@select(state => state.entityListIds.filter(...)) entity$

But with that approach, you still need to have sth like a currentEntityId somewhere else in your state.

My issue is that i'm not able to have that property due to the structure of the page (there are multiple currentEntities, within multiple entitiesGroups within a single entityOwner, for example) and I need the entitiesGroup Id, which is passed as an Input and Redux seems to set @selects before @inputs, so I can't really read it to use the approach I suggested. IDK if there's a way to bypass this or a better implementation