CODEWITHSUNDEEP
angularngrx
Jordi
Jordi

Reputation: 23247

Parent and Child components in ngrx

I'm trying to build a parent component with several dumped sub-components.

I don't quite figure out how design my dump sub-components. Theorically, each sub-component has to receive all data using @Input fields. So:

@Component({
  selector: '[payment-list]',
  ...
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class PaymentList  {
  @Input() payments$: Observable<ISource>;

What I'm trying to get using this input field is to list all payments are in payments. This is my IStore:

export interface IStore {
  user: IUser;
  plans: IPlanRedux;
  sources: ISourceRedux;
  errors: IError;
}

export interface ISource {
    id: string;
    type: string;
    customer: string;
}

export interface ISourceRedux {
    byId: { [key: string]: ISource };
    allIds: Array<string>;
}

Parent component builds an Observable<ISource> using this:

private sources$: Observable<ISource>;

constructor(private store$: Store<IStore>) {
    this.sources$ = this.store$
        .select(fromRoot.getSourceEntities);
}

So, into my parent.template.html:

<div payment-list></div>
  1. Dumped component needs to receive necessary all information using @Input fields? So, how could I send the parent observable to the dumped component? Is it correct?
  2. Could dumped components build its owned Observables and use them?
  3. Is there any best-practice approach to deal with this issue using ngrx?

Upvotes: 0

Views: 1546

Answers (1)

Julian
Julian

Reputation: 609

Your sub-component dont need a stream for that it only need the ISource object to function.

@Component({
  selector: '[payment-list]',
  ...
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class PaymentList  {
  @Input() payments: ISource;

private sources$: Observable<ISource>;
constructor(private store$: Store<IStore>) {
    this.sources$ = this.store$
        .select(fromRoot.getSourceEntities);
}

<payment-list payments="sources$ | async"></payment-list>

This approach makes your sub-component dumb in the way that it does not need to be aware of the store

Upvotes: 2

Related Questions