如何在同一个史诗中分配多个动作

Question

我正在使用React，Redux，Redux-Observable，rxjs和TypeScript。我有一部创造记录的史诗。我想从史诗中派遣其他动作。

export const createEpic: Epic = (action$) => action$.pipe(
    ofType(ITEMS_CREATE),
    mergeMap((action) => CoreCom.create<{Item: Item}>(
        '/items/index',
        {},
        'Item',
        action.item,
    ).pipe(
        map((response) => itemsCreateSuccess(response.response)),
        catchError(() => of(itemsCreateFailure())),
    )),
);

export const createSuccesEpic: Epic = (action$) => action$.pipe(
    ofType(ITEMS_CREATE_SUCCESS),
    map(
        () => enqueueSnackbar({
            message: 'Hello World!',
            options: {
                variant: 'success',
            },
        }),
    ),
);

第一个史诗对动作ITEMS_CREATE做出反应。然后，它会触发呼叫并返回服务器响应。然后分派动作ITEMS_CREATE_SUCCESS。另外，我想调度一个动作来显示通知。我最后写了两部史诗。

有人可以帮助我将这两个史诗“合并”为一个吗？还是这样好？

我无法从同一个史诗中调度两个动作。

Answer 1

我认为您的解决方案有一个好处，那就是关注点分离，这可以为您的代码带来更大的灵活性，因为稍后您可以使用此createSuccesEpic史诗来显示针对不同“成功操作”的成功通知（如我不知道您的应用上下文取决于您考虑这一点）。

关于您如何从createEpic分配这两个动作的问题，我看到了在第二个管道上使用mergeMap和merge的解决方案。因此您的代码将如下所示：

export const createEpic: Epic = (action$) => action$.pipe(
    ofType(ITEMS_CREATE),
    mergeMap((action) => CoreCom.create<{Item: Item}>(
        '/items/index',
        {},
        'Item',
        action.item,
    ).pipe(
        mergeMap(response => merge(
            of(itemsCreateSuccess(response.response)),
            of(enqueueSnackbar({ ... }))
        )),
        catchError(() => of(itemsCreateFailure())),
    )),
);