使用Angular存储时如何显示关于success_action的通知？ （v6）

Question

我想删除我的应用程序（Angular版本6）中的项目。以前我是直接打电话给服务的，但是现在我使用的是ngrx / store和ngrx / effects以及调度动作。

如代码所示，如​​果删除成功，我可以轻松显示通知。

问题

如何知道删除操作是否成功？

使用操作时如何立即显示通知？

谢谢。

---

代码

component.ts

constructor(
    private store: Store<any>,
    private snackBar: MatSnackBar,
) { }

deleteTopic(topicId: number) {

    // new way: dispatch action to delete the topic
    this.store.dispatch(new fromCourse.DeleteTopic(topicId));


    // old way
    // this.courseService.deleteTopic(topicId)
    //                   .subscribe(
    //                     data => {
    //                       this.ngOnInit();
    //                       this.snackBar.open('successfully deleted');
    //                     },
    //                     err => {
    //                       if (err.status === 403) {
    //                           this.snackBar.open('you dont have access to delete');
    //                       }
    //                     }
    //                   );

}

效果

@Effect()
deleteTopic$ = this.actions$.pipe(
    ofType<fromCourse.DeleteTopic>(CourseActionTypes.DELETE_TOPIC),
    switchMap((action) => {
        return this.courseService.deleteTopic(action.payload).pipe( // payload is the topicId to be deleted
        map(data => new fromCourse.DeleteTopicSuccess(action.payload) ) // send the topicId to reducer, to update state
        );
    })
);

减速器

case CourseActionTypes.DELETE_TOPIC_SUCCESS: {
    // find the index of topic and splice it

    return {
        // return new state
    };
}

Answer 1

在这里有两个可能的选择，第一个可能不起作用，具体取决于您的设置：

（1）使用@Effect，在CourseActionTypes.DELETE_TOPIC_SUCCESS操作中触发通知。除非您在触发通知时需要访问组件本身中的数据，否则它将起作用。

（2）侦听在组件中触发的CourseActionTypes.DELETE_TOPIC_SUCCESS操作，如下所示：

import { ActionsSubject } from '@ngrx/store'

constructor(private actionsSubject$: ActionsSubject) {}

ngOnInit() {
  this.actionsSubject$.pipe(
    filter((action: any) => action.type === CourseActionTypes.DELETE_TOPIC_SUCCESS)
  ).subscribe(action => {
    console.log(action.type)
    console.log(action.payload)
    // fire notification here
  })
}