在我的示例Angular 2应用程序中,我使用ngrx/store和ngrx/effects进行状态管理。
下图是其中的一个功能,在一个组件中添加一个新项。
addAuthor() {
this.store.dispatch(addAuthorAction(this.fg.value));
console.log('2')
}
在上面的代码中,this.store.dispatch(addAuthorAction(this.fg.value));
负责对服务器进行 AJAX 调用,并向数据库中添加新作者,这一过程运行良好。
由于this.store.dispatch(addAuthorAction(this.fg.value));
是async
操作,因此console.log("2")
语句甚至在 AJAX 调用完成之前就已执行。
我的问题是,需要修改什么,以便在store.dispatch完成后执行console.log。
5条答案
按热度按时间xfb7svmp1#
快回答:你不能这样
正如您所说,
dispatch
是异步的。你应该使用@ngrx/effects,它和
addAuthorAction
几乎一样,只是不是调用函数,而是“捕捉”被调度的动作,并在它们被reducer应用后立即执行一些操作。所以我一般会把我的行动分成3部分,例如:
FETCH_USER
FETCH_USER_SUCCESS
FETCH_USER_ERROR
FETCH_USER
只用于切换布尔值,这样我就可以在获取用户时显示微调器FETCH_USER_SUCCESS
中分派响应作为有效负载,否则我分派FETCH_USER_ERROR
,并将布尔值切换为false(例如,这样我们就可以再次尝试获取他)。所以在你的例子中,如果你想在FETCH_USER_SUCCESS之后
console.log
一些东西,只需使用另一个效果来捕捉FETCH_USER_SUCCESS并在这里做你想做的事情。aelbi1ox2#
测试工具
这也会起作用:
uqxowvwt3#
使用ngrx,您可以监听如下操作:
当你调度FIRST_ACTION时,使用一个效果来发出HTTP请求。在效果中,当你有响应返回时,用响应作为有效负载来激发SECOND_ACTION。然后只在你的控制器.ts文件中侦听SECOND_ACTION
hgc7kmma4#
今天我有类似的问题,我用tap()来解决这个问题。你什么时候从“rxjs/operators”导入效果tap
然后在SuccessAction上执行Map操作后在switchMap中使用它
这个密码对我有效
jdg4fx2g5#
由于分派是异步的(即触发后忽略),我们可以订阅返回的可观察对象,然后在获得可观察对象后执行下一条语句。
或者,
以上是每个ngxs状态管理框架。更多@ https://www.ngxs.io/advanced/actions-life-cycle#asynchronous-actions