分组和减少从ngrx状态树接收的自定义可观察数组答案

【问题标题】：Grouping and reducing a custom observable array which was received from ngrx state tree分组和减少从ngrx状态树接收的自定义可观察数组
【发布时间】：2019-12-25 13:13:34
【问题描述】：

我通过 API 调用接收数据。数据通过 ngrx-effects 接收并传递到状态树。然后我可以在我的角度组件的构造函数中获取数据并执行一些 rxjs 操作，如 mergeMap 和 reduce 以将其转换为我需要在 UI 中显示数据的格式。

我尝试在 stackblitz 中复制该场景，它按预期工作。请在下面找到链接

link: https://stackblitz.com/edit/typescript-rxjs-reduce

工作流状态树：

export interface WorkflowsState {
    workflows : workflow[] | [],
    allWorkflowsLoaded : false
}

整体应用状态树：

interface Appstate {
    workflows: WorkflowsState,
    smartNav: SmartNavState
}

效果方法：

@Effect() loadWorkflows$ = this.actions$.pipe(
    ofType(WorkflowsActionTypes.LoadWorkflows),
    switchMap((action: LoadWorkflows) =>
    this.http.get(url)
    .pipe(map((res: Workflow[]) => new WorkflowsLoaded(res))))
);

减速机部分：

switch (action.type) {
    case: WorkflowsActionTypes.WorkflowsLoaded:
    return {
        allWorkflowsLoaded : true,
        workflows: action.payload
};

仪表板组件中声明的公共变量：

public workflows$ : Observable<workflow[]>;
public dashboardTile$ : Observable<dashboardTile[]>;

带有选择器的构造函数：

constructor(private store : Store<AppState>) {
    this.workflows$ = this.store.select(state => state.workflows.workflows);
}

不确定为什么从 API 获取数据时它不起作用。我需要与示例（stackblitz 链接）控制台部分中显示的相同的输出。我能够从 api 获取数据，但 dashboardTile$ 返回为空。

【问题讨论】：

标签： angular typescript observable ngrx rxjs6

【解决方案1】：

经过 2 小时的努力，发现问题在于使用 reduce 运算符而不是 scan 运算符。由于 ngrx 状态对象尚未完成，它没有返回累积的数组。一旦用 scan 替换 reduce 运算符，它就开始给我想要的输出。以下帖子帮助我确定了修复程序。

Reduce returns empty array, however scan does not

【讨论】：