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

Question

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

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

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 在仪表板组件中声明的变量：

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

带有选择器的构造函数：

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

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

Answer 1

经过 2 小时的努力，发现问题在于使用 reduce 运算符而不是 scan 运算符。由于 ngrx 状态对象尚未完成，因此未返回累积数组。一旦将 reduce 运算符替换为 scan，它就会开始为我提供所需的输出。以下 post 帮助我确定了修复方法。

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

Grouping and reducing a custom observable array which was received from ngrx state tree

observable

typescript

ngrx

angular

rxjs6