показать диалоговое окно подтверждения с использованием redux-observable

Question

Я пытаюсь реализовать эпопею удаления с помощью диалогового окна подтверждения.

Я придумал этот подход. Преимущество в простоте тестирования.

Мой вопрос, это хороший подход, стоит ли мне беспокоиться о добавлении takeUntil(action$.ofType(MODAL_NO_CLICKED))?

Пожалуйста, дайте мне знать, если вы можете придумать лучший способ реализовать это.

    const deleteNotification$ = (id, { ajax }) => ajax({ url: `api/delete/{id}` });

    // showYesNo is an action to eventually show a dialog using this approach https://stackoverflow.com/a/35641680/235659
    const showYesNo = payload => ({
        type: SHOW_MODAL,
        modalType: MODAL_TYPE_YES_NO,
        modalProps: { ...payload },
    });

    const deleteNotificationEpic = (action$, store, dependencies) => {
        let uid = dependencies.uid; // dependencies.uid is added here to allow passing the uid during unit test.

        return merge(
            // Show confirmation dialog.
            action$.pipe(
                ofType(NOTIFICATION_DELETE_REQUEST),
                map(action => {
                    uid = shortid.generate();

                    return showYesNo({
                        message: 'NOTIFICATION_DELETE_CONFIRMATION',
                        payload: {
                            notificationId: action.notificationId,
                            uid,
                        },
                    })
                }),
            ),

            // Deletes the notification if the user clicks on Yes
            action$.pipe(
                ofType(MODAL_YES_CLICKED),
                filter(({ payload }) => payload.uid === uid),
                mergeMap(({ payload }) =>
                    deleteNotification$(payload.notificationId, dependencies).pipe(
                        mergeMap(() => of(deleteNotificationSuccess())),
                        catchError(error => of(deleteNotificationSuccess(error))),
                    ),
                ),
            ),
        );
    };

Я знаю, что могу показать диалоговое окно подтверждения на уровне React и отправлять действие удаления только в том случае, если пользователь нажимает Да, но мой вопрос - это более общий случай, когда у меня может быть некоторая логика (вызов серверной части) до решив показать диалог подтверждения или нет.

Answer 1

Ваше решение, как правило, хорошее. Существует вероятность появления странных ошибок, поскольку MODAL_YES_CLICKED всегда прослушивается, даже если уведомление не отображается, хотя вопрос о том, является ли это спорным.

Когда мне нужны похожие шаблоны, я лично настраиваю слушателя только по мере необходимости и проверяю, есть ли способ отменить (например, MODAL_NO_CLICKED), чтобы не допустить утечки памяти. Более последовательное выражение этого помогает мне понять ожидаемый поток.

return action$.pipe(
    ofType(NOTIFICATION_DELETE_REQUEST),
    switchMap(action => {
        uid = shortid.generate();

        return action$.pipe(
            ofType(MODAL_YES_CLICKED),
            filter(({ payload }) => payload.uid === uid),
            take(1),
            mergeMap(({ payload }) =>
                deleteNotification$(payload.notificationId, dependencies).pipe(
                    map(() => deleteNotificationSuccess()),
                    catchError(error => of(deleteNotificationSuccess(error))),
                ),
            ),
            takeUntil(action$.pipe(ofType(MODAL_NO_CLICKED))),
            startWith(
                showYesNo({
                    message: 'NOTIFICATION_DELETE_CONFIRMATION',
                    payload: {
                        notificationId: action.notificationId,
                        uid,
                    },
                })
            )
        )
    }),
)

Одна интересная вещь в моем подходе к вашему - это то, что мой немного более многословен, потому что мне нужно иметь takeUntil, а также take(1) (чтобы мы не пропускали память).

Юнит-тест:

it('should delete the notification when MODAL_YES_CLICKED is dispatched', () => {
        const uid = 1234;
        shortid.generate.mockImplementation(() => uid);
        const store = null;
        const dependencies = {
            ajax: () => of({}),
            uid,
        };

        const inputValues = {
            a: action.deleteNotificationRequest(12345, uid),
            b: buttonYesClicked({ id: 12345, uid }),
        };

        const expectedValues = {
            a: showYesNo({
                message: 'NOTIFICATION_DELETE_CONFIRMATION',
                payload: {
                    id: 12345,
                    uid,
                },
            }),
            b: showToastSuccessDeleted(),
            c: action.loadNotificationsRequest(false),
        };
        const inputMarble = '   a---b';
        const expectedMarble = '---a---(bc)';

        const ts = new TestScheduler((actual, expected) => {
            expect(actual).toEqual(expected);
        });
        const action$ = new ActionsObservable(ts.createHotObservable(inputMarble, inputValues));
        const outputAction = epic.deleteNotificationEpic(action$, store, dependencies);

        ts.expectObservable(outputAction).toBe(expectedMarble, expectedValues);
        ts.flush();
    });

Answer 2

Поскольку комментарии ограничены по длине, я публикую ответ, хотя он еще не один.

Не думаю, что смогу дать вам руководство, так как в примере кода отсутствуют реализации, поэтому он неясенчто именно происходитВ частности, что такое showYesNo и deleteNotification $?

---

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

const deleteNotificationEpic = (action$, store, dependencies) => {
  const uid = shortid.generate();