如何在使用 NgRX 管理 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.

Answer 2

There is a very common pattern that many developers use an which works create. Define three actions for your request: submitForm , submitFormSuccess and submitFormFailed .

Now you have to think about your state. Does anything change when the data arrives before the Modal closes? If so create another action, eg closeModal . Then the success action triggers the close modal action. In this pattern usually someone wants to store the success response somewhere in your store.

Then you have got three effects for it. Of course you can create an effect that listens directly to the success action, if you do not want to create another closeModal action. You can register multiple effects on one "ofType" action.

createEffect(() => this.actions$.pipe(
  ofType(submitForm),
  switchMap((value) => this.myService.submit(value).pipe(
    map(response => submitFormSuccess()),
    catchError(error => of(error))
  ))
));

createEffect(() => this.actions$.pipe(
  ofType(submitFormSuccess),
  map(() => closeModal)
));

createEffect(() => this.actions$.pipe(
  ofType(closeModal),
  tap(() => this.modalReference.close())
), { dispatch: false });

Answer 3

You have to inject NgbActiveModal in the constructor of the component and call the method close(REASON) on it. So in the component you do:

import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

export class ResetConfirmationComponent {

    constructor(
        public activeModal: NgbActiveModal
    ) { }
}

And in the template for that component:

<button type="button" class="btn btn-primary btn-default"
    (click)="activeModal.close('Reason for being closed ...')">
    Submit
</button>
<button type="button" 
    (click)="activeModal.dismiss('closed')">
    <span aria-hidden="true">&times;</span>
</button>

I don't know how you could close the dialog "on success". The open() method of NgbModal returns an Observable when close() was called on the NgbActiveModal (as opposed to calling dismiss() on it). If the operation was not successful, you should dispatch a failure action, and then re-open the dialog in another effect.

You can find a complete example repository showing the use of actions and effects: https://github.com/gflohr/ngbmodal-ngrx

Additional explanations and comments: http://www.guido-flohr.net/angular-bootstrap-modals-with-ngrx/