title: ngrx: awaiting of confirm or cancel in a custom dialog
body: <p><strong><em>ngrx, angular 7</em></strong></p>
  
  <p>I need to delete item from list but before I should display a dialog for confirmation. I think best aproach for me is to show dialog via <em>side-effect</em>. I need to show up when delete action was dispatched, catch it in side-effect open a dialog component and return some kind of promise (confirm or cancel). I'm a little bit confused to do this, so I need your help, dear Stackoverflow.</p>
  
  <p><strong>list.component.ts</strong></p>
  
  <pre><code>export class ListComponent {
  
      list: List;
  
      constructor(store: Store&lt;fromStore.State&gt;) { }
  
      deleteItem(itemId: string) {
          this.store.dispatch(new fromStore.DeleteItem);
      }
  }
  </code></pre>
  
  <p><strong>confirm-dialog.component.ts</strong></p>
  
  <pre><code>export class ConfirmDialogComponent {
  
      constructor() { }
  
      confirm() {
          // return something to confirm deleting
      }
  
      cancel() {
          // return something to cancel deleting
      }
  }
  </code></pre>
  
  <p><strong>list.actions.ts</strong></p>
  
  <pre><code>export enum ListActionTypes {
      DeleteItem = '[List] Delete Item',
      DeleteItemSuccess = '[List] Delete Item Success',
      DeleteItemFailure = '[List] Delete Item Failure',
  
      SetDialogVisibility = '[List] Set Dialog Visibility'
  }
  
  export class DeleteItem implements Action {
      readonly type = ListActionTypes.DeleteItem;
  
      constructor(public payload: string) { } // item id
  }
  
  export class DeleteItemSuccess implements Action {
      readonly type = ListActionTypes.DeleteItemSuccess;
  
      constructor(public payload: string) { }
  }
  
  export class DeleteItemFailure implements Action {
      readonly type = ListActionTypes.DeleteItemFailure;
  }
  
  export class SetDialogVisibility implements Action {
      readonly type = ListActionTypes.SetDialogVisibility;
  
      constructor(public payload: boolean) { } // depends on this value I show or hide dialog
  }
  
  export type VoyagePageActions = CreateVoyage
      | DeleteItem
      | DeleteItemSuccess
      | DeleteItemFailure
      | SetDialogVisibility;
  </code></pre>
  
  <p><strong>list.effects.ts</strong></p>
  
  <pre><code>    export class ListEffects {
  
      constructor(
          private actions$: Actions,
          private store: Store&lt;fromStore.State&gt;
      ) { }
  
      @Effect() DeleteItem$: Observable&lt;Action&gt; = this.actions$
          .pipe(
              ofType(ListActionTypes.DeleteItem),
              map((action: DeleteItem) =&gt; action.payload),
              // show dialog
              // wait for answer
              // send http request to delete item
              // delete item from store
          );
  }
  </code></pre>