angular-redux / store

Angular 2+ bindings for Redux
MIT License
1.34k stars 205 forks source link

Using @select decorator with @Input #557

Open mattduggan opened 5 years ago

mattduggan commented 5 years ago

This is a...

What toolchain are you using for transpilation/bundling?

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 commented 3 years ago

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