Upon making an API call, the data is retrieved and processed through ngrx-effects before being stored in the state tree. From there, I can access the data in my angular component's constructor and utilize rxjs methods like mergeMap and reduce to format the data for UI display.
After successfully replicating the process on stackblitz, everything is functioning as intended. You can view the implementation through the following link:
link: https://stackblitz.com/edit/typescript-rxjs-reduce
Workflow State Tree:
export interface WorkflowsState {
workflows: workflow[] | [],
allWorkflowsLoaded: false
}
Overall App State Tree:
interface AppState {
workflows: WorkflowsState,
smartNav: SmartNavState
}
Effect Method:
@Effect() loadWorkflows$ = this.actions$.pipe(
ofType(WorkflowsActionTypes.LoadWorkflows),
switchMap((action: LoadWorkflows) =>
this.http.get(url)
.pipe(map((res: Workflow[]) => new WorkflowsLoaded(res))))
);
Reducer Section:
switch (action.type) {
case: WorkflowsActionTypes.WorkflowsLoaded:
return {
allWorkflowsLoaded: true,
workflows: action.payload
};
Public Variables Declared in Dashboard Component:
public workflows$: Observable<workflow[]>;
public dashboardTile$: Observable<dashboardTile[]>;
Constructor with Selector:
constructor(private store: Store<AppState>) {
this.workflows$ = this.store.select(state => state.workflows.workflows);
}
Despite successfully fetching data from the API, I am encountering an issue where the dashboardTile$ variable returns null. I am aiming to achieve the same console output as demonstrated in the provided stackblitz example. Any insights on why this discrepancy may be occurring would be greatly appreciated.