如何在角度存储上实现错误处理 [英] how to implement error handling on store in Angular

问题描述

我正在处理现有的代码库，我的任务是在我的更新图表中实现错误处理，但不确定如何正确实现，因为我使用的是商店管理，所以如果我能就如何在商店中实现错误处理获得任何建议或帮助，我将不胜感激。

我做了类似的操作，并通过在我的ChartService.ts文件中提供错误的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

推荐答案

您非常接近：

• 您的更新派送正常
• 您的图表加载正常
• 您的catchError错误

注意您调度操作以使用新数据更新存储区的方式，您需要在收到错误时执行相同的操作。

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

所以这个新操作将使用Reducer在存储中设置错误。现在，要知道是否发生了错误，您需要一个选择器来检查您刚刚在存储中更新了什么，这意味着您的saveClick()不会处理任何错误。您要么在ts文件中订阅选择器，要么在html中订阅选择器，具体取决于您要做什么。我真的帮不上你的语法，因为我不知道你的减法器/动作/选择器是什么样子的。

这篇关于如何在角度存储上实现错误处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！