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

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。
另外我想发送一个动作来显示通知。我最后得到了两个 epics.

谁能帮我把这两个 epics "merge" 合二为一？还是这样就很好？

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

编辑：

仅供参考：函数 itemsCreateSuccess()、itemsCreateSuccess() 和 enqueueSnackbar() 返回的内容与此类似：

export const itemsCreateSuccess = (response: Response): ItemsCreateSuccessAction => ({
    type: ITEMS_CREATE_SUCCESS,
    response,
});

他们只是返回操作

Answer 1

在我看来，您的解决方案有一个优点，那就是关注点分离，可以为您的代码带来更大的灵活性，因为稍后您可以使用此 createSuccesEpic 史诗来显示不同 "success actions"（因为我不知道你的应用程序的上下文由你来考虑）。

关于如何从 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())),
    )),
);

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

how to dispatch multiple actions in same epic

reactjs

typescript

redux

rxjs

redux-observable