Как закрыть MatDialogBox или любой div, когда API успешно работает в состоянии NGXS?

Я начал изучать управление состоянием с помощью NGXS. Пока все в порядке, но есть несколько вопросов относительно некоторых сценариев, таких как:

  1. Если открыто диалоговое окно Mat (или любой div - здесь у меня есть оба сценария в моем проекте) и изнутри него вызывается API, как я могу закрыть диалоговое окно, только если API возвращает успех?

  2. Предположим, пользователь вышел из системы, как я могу сбросить состояния до значений по умолчанию?

Для первого случая ниже мой код для состояния, действия и диспетчера:

abc.action.ts

export class AddExamCategory {
    static readonly type = '[ExamCategory] Add';
    constructor(public payload: ExamCategory) {}
}

abc.state.ts

export interface ExamCategoryStateModel {
    examCategoryList: ExamCategory[];
}

@State<ExamCategoryStateModel>({
    name: 'examCategory',
    defaults: {
        examCategoryList: []
    }
})

@Injectable()
export class ExamCategoryState {

    constructor(private _adminService: AdminService) {}

    @Action(AddExamCategory)
    addExamCategory({ getState, patchState }: StateContext<ExamCategoryStateModel>, { payload }: AddExamCategory) {
        return this._adminService.createExamCategory(payload).pipe(tap(response => {
            patchState({ examCategoryList: [] }); // Want to close the modal/div after this part. If API returns ERROR do not close.
        }));
    }
}

abc.component.ts

this.store.dispatch(new AddAdminUser({ ...this.adminRegistrationForm.value, password: this.password.value }))
    .subscribe(response => {
      this.store.dispatch(new GetAdminUsers());
      this.dialogRef.close(true)
    });

В настоящее время это так, но закрывается независимо от статуса API.

Для второго случая в сервисе, где я писал логику для logout(), я написал так: this.store.reset({}). Хотя он сбрасывает состояние, но не со значениями по умолчанию. У меня есть несколько состояний для сброса этого единственного метода выхода из системы.

Как работать с этими сценариями?


person Avishek Datta Ray    schedule 13.07.2021    source источник


Ответы (2)


Вы можете добавить дополнительное свойство в свое состояние, чтобы отслеживать состояние запроса вашего приложения («запрос», «ожидание») [вы можете создавать дополнительные состояния по мере необходимости для отслеживания ответа «успех» и «ошибка» с сервера]

при отправке GetAdminUsers установите значение вновь добавленного состояния в requesting, а в GetAdminUsersComplete установите значение в idle

подпишитесь на селектор, который считывает состояние вашего ngOnInit и вызывает dialogRef.clse(true) внутри него. как показано ниже:

this.store
      .pipe(
        select(selectors.selectRequestState),
        skip(1) //only start tracking after request created
      )
      .subscribe(result => {
        if (result == 'idle')
          this.dialogRef.close()
      });

пример: https://stackblitz.com/edit/angular-ivy-4ofc3q?file=src/app/app.component.html

Сбросить состояние

Я не думаю, что есть простой способ сбросить состояние с помощью магазина. Вам нужно просмотреть все функции состояния и реализовать действие reset, которое устанавливает состояние в начальное состояние.

самое простое решение - обновить страницу браузера после выхода пользователя из системы, используя location.reload();

  • если вы храните хранилище внутри локального хранилища, вам нужно сначала удалить его, а затем перезагрузить
person Ayman Ali    schedule 13.07.2021
comment
Можете ли вы предоставить мне рабочий пример? - person Avishek Datta Ray; 14.07.2021
comment

самый простой способ добиться этого - с эффектом, после того, как вы отправите свое действие, вы сможете инициировать другое действие, например UsserAddedSuccessfully, и прочитать его после закрытия этого модального окна.

прочитайте этот вопрос для более подробной информации.

person Abiezer    schedule 17.07.2021