Question

我正在尝试使用确认对话框实现删除史诗。

我提出了这种方法。它具有易于测试的优点。

我的问题是，这是一个好方法，我应该担心添加>>> import random >>> random.shuffle(numbers) >>> sum([n for n in numbers if not n%2]) 110吗？

如果您能想出更好的方法来实现这一点，请告诉我。

takeUntil(action$.ofType(MODAL_NO_CLICKED))

我知道我可以在React级别显示确认对话框，并且只有在用户点击Yes时才调度删除操作，但我的问题是更常见的情况，我可能有一些逻辑（调用后端）决定是否显示确认对话框。

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 $？

顺便说一句，你创建的唯一ID只会在史诗启动时完成一次。这似乎是一个错误，因为唯一ID通常不可重复使用？

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

使用redux-observable显示确认对话框

2 个答案: