I am currently experiencing the following effect:
initCompaniesAndSetCompanyEffect$: Observable<Action> = createEffect(
(): Observable<Action> =>
this.actions$.pipe(
ofType<changeCompanyActions.InitCompaniesAction>(changeCompanyActions.SelectedCompanyActionTypes.INIT_COMPANY),
mergeMap(() =>
this.companyService
.getCompanies()
.pipe(
mergeMap((companies) => [new changeCompanyActions.LoadCompaniesAction(companies), new changeCompanyActions.InitSetCompanyAction(companies[0])])
)
)
)
);
In addition, these are my defined actions:
export class InitCompaniesAction implements Action {
readonly type = SelectedCompanyActionTypes.INIT_COMPANY;
}
export class LoadCompaniesAction implements Action {
readonly type = SelectedCompanyActionTypes.LOAD_COMPANIES;
constructor(public payload: Company[]) {}
}
export class InitSetCompanyAction implements Action {
readonly type = SelectedCompanyActionTypes.INIT_COMPANY;
constructor(public payload: Company) {}
}
Furthermore, when dispatching onInit in my component:
companies$: Observable<Company[]>;
selectedCompany$: Observable<Company>;
constructor(private store: Store<CompanyStoreState.SelectedCompanyState>) {}
ngOnInit(): void {
this.companies$ = this.store.select(CompanyStoreSelectors.selectCompaniesList);
this.selectedCompany$ = this.store.select(CompanyStoreSelectors.selectSelectedCompany);
this.store.dispatch(new CompanyStoreActions.InitCompaniesAction());
}
However, I am encountering a problem where multiple http calls are being triggered by the service infinitely. Despite trying various solutions found online, I have not been able to identify the root cause of this issue. If anyone has any insights or suggestions to offer, your help would be greatly appreciated.