Как отобразить уведомление о success_action при использовании магазина Angular?(V6) - PullRequest
Новая
       9

Как отобразить уведомление о success_action при использовании магазина Angular?(V6)

0 голосов
/ 11 октября 2018

Я хочу удалить элемент в моем приложении (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
    };
}

1 Ответ

0 голосов
/ 11 октября 2018

Здесь возможны два варианта, первый из которых может не сработать, в зависимости от настроек:

(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
  })
}
...