如何在 Angular 中的 store 上实现错误处理

Question

我正在处理现有的代码库，我的任务是在我的更新图表中实现错误处理，但由于我正在使用商店管理，我不太确定如何正确实现，所以如果我能得到任何建议或关于如何在商店中实现错误处理的帮助。

我做了类似的事情，并通过在我的 ChartService.ts 文件中提供错误的 api 路由来测试它，但我没有收到错误消息，并且无论我是否给予权利，它总是说它“已保存”更新图表的api路由或错误的api路由。

我现在遇到的问题是，即使 api 或网络出现错误，它也没有给我错误的快餐栏消息。

import {Store} from '@ngrx/store';

  saveClick(){
    try
    {
      this.store.dispatch(updateChart({chart: this.chart}));
      this.snackbar.open("Changes to \"" + this.chart.name + "\" has been saved", "", { duration: 2500 });
    }
    catch(error)
    {
      this.snackbar.open("Error has occurred. Could not update Chart", "", { duration: 2500 });
    }
  }

Chart.effets.ts

    updateChart$ = createEffect(() => this.actions$.pipe(
        ofType(ChartActionTypes.UpdateChart),
        exhaustMap((props: { chart: Chart }) => this.chartService.updateChart(props.chart)//this.getChart(props)
            .pipe(
                // tap(c => console.log('TAPPY TAP', c)),
                map(chart => {
                    return chartLoaded({ chart: chart })
                }),
                catchError(() => EMPTY)
            ),
        )
    )
    )

HTML

    <button color="primary" mat-flat-button (click)="saveClick()" [disabled]="this.chart.isPublished">Save</button>

它不会继续运行，但我在 stackblitz 中上传了该组件的所有代码，希望有人可以通过查看代码来帮助我。谢谢https://stackblitz.com/edit/angular-ivy-ncbmb4

Answer 1

你很接近：

• 您的更新发送很好
• 您的 chartLoaded 很好
• 你的 catchError 错误

请注意您发送操作以使用新数据更新您的商店的方式，当您遇到错误时需要执行相同操作。

catchError((error: any, effect: Observable<Action>) => effect.pipe(startWith(chartUpdateError({ error }))))

因此，这个新操作将使用 reducer 在 store 中设置错误。现在要知道是否发生了错误，您需要一个选择器来检查您刚刚在商店中更新的内容，这意味着您的 saveClick() 不会处理任何这些。您可以在 ts 文件或 html 中订阅选择器，具体取决于您要执行的操作。我无法真正帮助您处理语法，因为我不知道您的 reducer/action/selector 是什么样的。