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);
}
}
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));