reactjs - 如何在同一个史诗中调度多个动作
问题描述
我正在使用 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,
});
他们只是返回动作
解决方案
在我看来,您的解决方案有一个好处,那就是关注点分离可以为您的代码带来更大的灵活性,因为稍后您可以使用这个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())),
)),
);
推荐阅读
- c# - SqlException:无法将值 NULL 插入列“UserDetail_Id”、表“dbo.Users”;列不允许空值。插入失败
- git - 从 Bitbucket 开始 - 如何移动我的本地开发文件夹并保留历史记录?
- javascript - JQuery如何正确设置滑块效果
- elixir - Elixir-Phoenix:在测试中禁用 Hammer 的速率限制
- mongodb - 在 express API 中获取字符串以传递给 mongodb 查找函数
- c# - 是否有 C# 代码直接在对象引用上调用 `brtrue`/`brfalse` 指令的空值检查功能?
- java - 为什么java静态变量不更新?
- python - 如何在 Pygame 中画一个半透明的圆圈?
- javascript - JavaScript - window.scroll({ behavior: 'smooth' }) 在 Safari 中不起作用
- node.js - util方法的firebase代码组织