Как закрыть модалы в проекте, который использует NgRX для управления состоянием

Question

Есть ли какое-нибудь хорошее решение при работе с модалами в проекте, где состояние управляется NgRX?

Проблема у меня следующая:

• Пользователь нажимает на кнопку, чтобы создатьновый предмет.
• Откроется модальное окно.
• Пользователь заполняет форму и нажимает кнопку Отправить.
• Отправляет действие, запускает эффекты и создает элемент, отправляя HTTP-запрос.
• Теперь мне нужно закрыть модал в случае успеха. Как узнать, когда закрыть его либо внутри модального компонента, либо внутри компонента, открывшего этот модал?

Одно из решений, которое я вижу сейчас, - это возврат нескольких действий из эффекта, который добавляет созданныйпункт в магазин, второй, чтобы закрыть модал. Для этого я должен включить модальный идентификатор в действие «Создать», чтобы определить, какой модальный режим закрывать после завершения эффекта «Создать $», но это усложнит эффект.

Не могу поверить, что нет готовыхРешение этой проблемы.

Я использую ngx-bootstrap для модалов.

ОБНОВЛЕНИЕ: Похоже, что для выполнения этой работы мне нужно сохранить (состояние + редуктор + эффекты + действия) состояние открытия / закрытияза каждый модал, доступный в приложении. Но в любом случае, нет существующего решения?

Answer 1

Мне нравится использовать эффект для обработки всего диалогового потока, от открытия диалога до сохранения сущности и последующего закрытия диалога.

@Effect()
openDialog = this.actions.pipe(
  ofType(LoginActionTypes.OpenLoginDialog),
  exhaustMap(_ => {
    let dialogRef = this.dialog.open(LoginDialog);
    return dialogRef.afterClosed();
  }),
  map((result: any) => {
    if (result === undefined) {
      return new CloseDialog();
    }
    return new LoginDialogSuccess(result);
  }),
);

См. Начните использовать ngrx / Effects для этого для получения дополнительной информации.