Ngrx / Effects: как показать диалог перед обновлением через http

Question

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

У меня есть действие, updateItem, которое получает идентификатор элемента:

export const updateItem = createAction('...', props<{ id: number }>());

В моем компоненте я отправляю действие с ID.

Мой эффект выглядит следующим образом:

...
updateItem$ = createEffect(() => 
  ofType(ItemActions.updateItem),
  exhaustMap(({id}) => // <-- here i have access to the item id
    this.dialog.open<..., ..., boolean>(...).afterClosed()
  ),
  map(result => result ? result : new ActionItems.DialogClose()),
  switchMap(() => // <-- no access to id, since the result is now a boolean
    // make a http request to update user with id
    this.http.patch<...>(..., [...]).pipe(
      map(...),
      catchError(...)
    );
  )
);
...

Теперь у меня нет доступа к идентификатору, когда я выполняю http-вызов. Как показать диалог подтверждения, но сохранить идентификатор? Я думал о «withLatestFrom» -операторе, но я хочу, чтобы http-запрос выполнялся только при успешном диалоге.

Я также пытался создавать для различных действий, одно из которых отправляет диалог, а второе - updateItem, если диалог завершился успешно. Но даже тогда я пропускаю идентификатор, поскольку он преобразуется.

Я мог бы передать идентификатор в диалог и вернуть идентификатор в качестве близкого результата, но на самом деле я хочу, чтобы мой компонент отображался. Пример Ngrx / platform делает нечто подобное, но им не нужны данные (https://github.com/ngrx/platform/blob/master/projects/example-app/src/app/auth/effects/auth.effects.ts).

У кого-нибудь есть идеи о том, как я могу решить эту проблему?

Answer 1

Из вашего описания я понимаю, что когда пользователь нажимает кнопку, чтобы обновить элемент, вы сначала хотите показать диалоговое окно, а если пользователь подтверждает, вы отправите http-запрос на сервер для обновления значения. Предполагая, что это так, я даю ответ здесь.

Если бы мне пришлось это сделать, я бы открыл это диалоговое окно в component.ts и вызвал бы это действие, чтобы выполнить http-вызов, если пользователь подтвердит это диалоговое окно. Вы также можете сделать что-то вроде этого, и это станет чище.

обновите ваш component.ts,

updateItem(id: number) {
    this.dialog.open <..., ..., boolean > (...)
    .afterClosed()
    subscribe((confirmed) => {
        if (confirmed) {
            // dispatch your action from here
            this.store.dispatch(updateItem({ id: id }))
        }
    }
}

измените свой эффект на что-то вроде этого.

updateItem$ = createEffect(() => 
  ofType(ItemActions.updateItem),
  map(action => action.id),
  switchMap((id: number) => // you should get your id here to make http call
    this.http.patch<...>(..., [...]).pipe(
      map(...),
      catchError(...)
    );
  )
);