如何在同一个史诗中调度多个动作

Posted 2023-03-13

【中文标题】如何在同一个史诗中调度多个动作

【英文标题】：how to dispatch multiple actions in same epic

【发布时间】：2020-07-29 23:37:16

【问题描述】：

我正在使用 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。 另外我想发送一个动作来显示一个通知。我最终得到了两部史诗。

有人能帮我把这两个史诗“合并”成一个吗？还是这样好吗？

我无法从同一个史诗中分派两个动作。

编辑：

仅供参考：itemsCreateSuccess()、itemsCreateSuccess() 和 enqueueSnackbar() 函数返回类似于以下内容：

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

他们只是返回动作

【参考方案1】：

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

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

【讨论】：

谢谢。您的解决方案按预期工作！但是，由于您的第一个论点，我将使用我的解决方案。