NGRX -单一效应的多重作用
这就是我的效果..。
@Effect() uploadImages$ = this.actions$
.ofType(ProjectActions.UPLOAD_IMAGES)
.map(action => action.payload)
.flatMap(project => this.service.uploadImages(project))
.switchMap((project) => Observable.of(
this.imageActions.loadImages(),
this.projectActions.uploadImagesSuccess(project),
));尝试在uploadImagesSuccess触发之前从API加载图像列表。
我尝试使用.concatMap和.mergeMap而不是.switchMap，但这似乎不是它的本质。
对于效果和可观察性而言，这是非常新的，从我所遇到的情况来看，没有什么能让我找到任何答案。
只需要一个接一个的解雇完成。
编辑1
因此，loadImages()触发，一旦它完成API调用，它就会触发loadImagesSuccess()。我想我要做的是……
@Effect() uploadImages$ = this.actions$
.ofType(ProjectActions.UPLOAD_IMAGES)
.map(action => action.payload)
.flatMap(project => this.service.uploadImages(project))
.switchMap((project) => Observable.of(
this.imageActions.loadImages(),
this.imageActions.loadImagesSuccess(),
this.projectActions.uploadImagesSuccess(project),
));在更一般的意义上，我把一张照片保存到API上的一个项目中。我希望在ImageState ()有效负载到达选择器并具有未定义的图像路径之前刷新uploadImagesSuccess()，因为ImageState没有及时更新。
编辑2
我来此解决方案是为了使用ForkJoin，https://github.com/ngrx/effects/issues/64
@Effect() uploadImages$ = this.actions$
.ofType(ProjectActions.UPLOAD_IMAGES)
.map(action => action.payload)
.flatMap(project => {
let projectInfo$ = this.projectService.uploadImages(project);
let imageInfo$ = this.imageService.loadImages();
return Observable.forkJoin(projectInfo$, imageInfo$);
})
.mergeMap((results: any[]) => {
let myActions: any[] = [];
let actionGenerators = [
(data: any) => {
return this.projectActions.uploadImagesSuccess(data);
},
(data: any) => {
return this.imageActions.loadImagesSuccess(data);
}
];
results.forEach((data: any, index: number) => {
myActions.push(actionGenerators[index](data));
});
return Observable.from(myActions);
});不确定这是否是最好的方法，但只要我延迟API调用来加载图像，它就能工作。在没有延迟的情况下，将在保存新图像之前加载图像。目前，我在API端延迟loadImages()。
如果可能的话，我希望有一种更好的方法来处理将API调用发送到imageService.loadImages()，直到projectService.uploadImages()返回为止。然后，一旦返回所有数据，启动操作以更新存储。
建议使用concat代替forkJoin，以便等待一个API调用完成后再转到下一个API调用。但是这会中断results.Foreach()，因为结果已经不在数组中了。
回答 2
Stack Overflow用户
发布于 2017-07-26 13:22:42
也许你可以试试这个。不要使用load映像操作，只需在上传图像的副作用中执行调用即可。就像这样：
@Effect() uploadImages$ = this.actions$
.ofType(ProjectActions.UPLOAD_IMAGES)
.map(action => action.payload)
.mergeMap(project => this.service.uploadImages(project)
.mergeMap(() => {
return this.otherService.loadImages()
.map((images) => this.projectActions.uploadImagesSuccess({ project: project, images: images))
}
));然后，通过侦听UPLOAD_IMAGES_SUCCESS操作，可以使两个还原器都更新状态：
export default function ProjectReducer (state = initialState, action: Action) {
switch (action.type) {
case UPLOAD_IMAGES_SUCCESS:
return // do your update with action.payload.project
default:
return state;
}
};
export default function ImagesReducer (state = initialState, action: Action) {
switch (action.type) {
case UPLOAD_IMAGES_SUCCESS:
return // do your update with action.payload.images
default:
return state;
}
};您可以在ngrx示例应用程序中看到相同的模式。在这两种减速器中，ADD_TO_CART都被监听：
https://github.com/btroncone/ngrx-examples/blob/master/shopping-cart/src/app/reducers/products.ts
https://github.com/btroncone/ngrx-examples/blob/master/shopping-cart/src/app/reducers/cart.ts
Stack Overflow用户
发布于 2017-07-25 12:47:04
使用优惠：
@Effect() uploadImages$ = this.actions$
.ofType(ProjectActions.UPLOAD_IMAGES)
.map(action => action.payload)
.flatMap(project => this.service.uploadImages(project))
.switchMap((project) => Observable.concat(
this.imageActions.loadImages(),
this.projectActions.uploadImagesSuccess(project),
));或来自：
@Effect() uploadImages$ = this.actions$
.ofType(ProjectActions.UPLOAD_IMAGES)
.map(action => action.payload)
.flatMap(project => this.service.uploadImages(project))
.switchMap((project) => Observable.from([
this.imageActions.loadImages(),
this.projectActions.uploadImagesSuccess(project)]
));https://stackoverflow.com/questions/45292974
复制相似问题
腾讯云开发者
