angularngrxngrx-storefacade

issue with using facade method in NGRX in Angular


I am working with NGRX and facade. I am facing some issues. When i called getLedgerAccountTypes() method of facade it make api request and give back response. but issue is that I cannot use .pipe().subscribe() with it and I can not assign the data to variable in a component. On the other hand, I have getLedgerAccountTypes$() with which I can use .pipe().subscribe() but it does not make api request and select from the state. I need a method which can make api request, get a response and I can assign the data to a variable in a component. I have attach my code. please see my code and let me know how can I fix it.

ngOnInit(): void {
    this.facade.getLedgerAccountTypes();
    this.facade
      .getLedgerAccountTypes$()
      .pipe(takeWhile(() => this.alive))
      .subscribe((response: LedgerAccountTypeDef) => (this.ledgerAccountTypes = response.data));
  }

import { Injectable } from '@angular/core';

import { Observable } from 'rxjs';

import { Store } from '@ngrx/store';

import { FieldUsageType } from '../../../../shared/enums/field-usage-type';
import {
  LedgerAccountTypeDef
} from '../../../../shared/model/cashbook-def.interface';
import * as fromActions from './add-new-ledger-account.actions';
import * as fromSelectors from './add-new-ledger-account.selectors';
import { AddNewLedgerAccountState } from './add-new-ledger-account.state';

@Injectable({
  providedIn: 'root'
})
export class AddNewLedgerAccountFacade {
  constructor(private store$: Store<AddNewLedgerAccountState>) {}

  getLedgerAccountTypes(): void {
    this.store$.dispatch(new fromActions.GetLedgerAccountTypesRequest());
  }

  getLedgerAccountTypes$(): Observable<LedgerAccountTypeDef> {
    return this.store$.select(fromSelectors.ledgerAccountTypesSelector);
  }
}


Solution

  • Try the following code with RxJs of you will wrap your first call in an Observable right after you will call the select from the store by using a switchMap and Finally the subscribe with you logic.

    of(this.facade.getLedgerAccountTypes())
           .pipe(
             switchMap(() => this.facade.getLedgerAccountTypes$()),
             takeWhile(() => this.alive)
           )
    .subscribe((response: LedgerAccountTypeDef) => (this.ledgerAccountTypes = response.data));