How to close modals in project that uses NgRX to manage state

Question

Is there any good solution when working with modals in a project where state is managed by NgRX?

The problem I have the following:

• User clicks on button to create a new item.
• Modal window opens.
• User fills out the form and clicks on Submit.
• Dispatch an action, effects fires up and creates an item by sending HTTP request.
• Now I need to close modal on success. How do I know when to close it either inside modal component or inside component that opened this modal?

One of the solutions I see right now is to return multiple actions from the effect, one that adds created item to the store, second one to close the modal. For this I should include some modal identifier in "Create" action to identify which modal to close after "Create$" effect completes, but this will make effect more complicated.

I can't believe there is no ready solution to this problem.

I use ngx-bootstrap for modals.

UPDATE: Seems like to make this work I need to store (state + reducer + effects + actions) open/closed status for each modal available in the application. But anyway, no existing solution?

Answer 1

I like to use an effect to handle the whole dialog flow, from opening the dialog to saving the entity and closing the dialog afterwards.

@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);
  }),
);

See Start using ngrx/effects for this for more info.