angular - NgRx 效果无限循环
问题描述
我知道这个问题已经在 SO 上被问了一百万次。但我需要帮助。我确实意识到我必须在这里遗漏一些重要的东西。但我没有看到它。
下面的代码触发了一个无限循环。REMOVE_PROJECT 仅被调度一次。REMOVE_PROJECT_SUCCESS 被无限触发。'removed' 被无限记录。我不知道为什么。
所有动作都有独特的类型。dispatch: false
为 REMOVE_PROJECT_SUCCESS 启用。
行动:
export const REMOVE_PROJECT = createAction(
'[Project] Remove Project',
props<{ id: string }>()
);
export const REMOVE_PROJECT_SUCCESS = createAction(
'[Project] Remove Project Success',
);
效果:
@Effect()
removeProject$ = createEffect(() => this.actions$.pipe(
ofType(ProjectActions.REMOVE_PROJECT),
switchMap(props =>
this.projects.removeProject(props.id).pipe(
map(() => ({ type: '[Project] Remove Project Success'}),
// have also tried
// map(() => ProjectActions.REMOVE_PROJECT_SUCCESS())
)
))
))
@Effect({ dispatch: false })
removeProjectSuccess$ = createEffect(() => this.actions$.pipe(
ofType(ProjectActions.REMOVE_PROJECT_SUCCESS),
tap(() => console.log('removed')),
))
删除功能:
removeProject(projectId): Observable<void> {
return from(this.db.doc('projects/' + projectId).ref.delete());
}
解决方案
这是因为您将@Effect()
装饰器与createEffect()
. 他们都在幕后做同样的事情,很可能触发了无限循环。删除@Effect()
注释(推荐)或createEffect()
(我会留下这个)。
更具体地说, thecreateEffect()
也{dispatch: false}
作为第二个参数(在您的可观察管道之后)。由于您没有在第二个选项中包含此选项,因此它只会重新调度您使用过滤的操作ofType
,从而在您遇到的无限循环中一遍又一遍地触发相同的操作。
如果您不想调度,第二个效果应该是这样的:
removeProjectSuccess$ = createEffect(() => this.actions$.pipe(
ofType(ProjectActions.REMOVE_PROJECT_SUCCESS),
tap(() => console.log('removed')),
), { dispatch: false })
EffectsModule
在幕后,装饰器和函数都向消耗的可注入类添加注释。在这种情况下,它会产生一个不会分派的效果,以及默认分派的第二个效果。我希望这是有道理的。
推荐阅读
- c# - main.cs(7,5):错误 CS0103:当前上下文中不存在名称“watch”
- reactjs - ./src/index.js 未找到模块:无法解析“aws-amplify”反应
- webdriver-io - 当我尝试以编程方式运行测试时,WebdriverIO 的后挂钩不起作用
- qt - 试图理解 QML 按钮和锚点
- macos - 无法通过主机的特定 http 端口访问多通道 VM
- python - 正则表达式似乎不适用于预期的输入
- python - Sklearn隔离森林中污染设置与异常值预测数量之间的不一致
- excel - 根据比率将数字添加到范围
- microsoft-graph-api - MS Teams 管理员如何为他们的用户安装自定义应用程序,以便我收到他们所有用户的 conversation_id
- generics - “特征函数的通用参数”和“特征的通用参数”有什么区别?