Question

我当前正在使用从valor软件上传的ng2文件来将图像上传到服务器。

我以前的代码是这样写的：添加新帖子后，图片上传器将根据响应ID（即帖子ID）上传图片。

this.socialPostService.addPost(postHeader).subscribe((response: PostHeader) => {
  this.pictureUploader.setOptions({
    url: this.baseUrl + 'socialphotos/post/' + response.id
  });
  this.pictureUploader.uploadAll();
}, error => {
  // this.errorService.handleError(error);
  this.errorService.handleError(error);
});

我正在学习状态管理并将其转移到NGRX方法，我发现添加帖子后很难执行图像上传，因为我无法从添加帖子的操作中返回帖子ID。

下面是我正在尝试的新方法：

与服务器配合使用并添加帖子的效果。

@Effect()
    AddPost$: Observable<Action> = this.actions$.pipe(
        ofType<PostActions.AddToPost>(
            PostActions.ActionTypes.Add_To_Post
        ),
        mergeMap((action: PostActions.AddToPost) =>
            this.socialPostService.addPost(action.payload).pipe(
                map((newPost: PostHeader) =>
                        new PostActions.AddSuccess(newPost)
                ),
                catchError(err => of(new PostActions.AddFailed(err)))
            )
        )
    );

发送添加后操作：

this.store.dispatch(new postHeaderActions.AddToPost(postHeader));
//Return post Id and perform image uploading based on that

反正有没有从ngrx效果返回新添加的帖子ID，以便我可以基于此执行图像上传？

谢谢

Answer 1

您应该对设计进行一些更改，以更好地整合NgRx的精神。

我建议您：

创建共享服务UploadService，其中包含对FileUploader的引用
此服务将侦听FileUploader事件，并调度操作以通知商店（状态）。
例如，您的视图组件可以使用FileUploader来管理放置区（或者您应该开发此部分），但是其余的它应该与动作/选择器进行交互。
管理一些工作流程，例如：
- 调度AddNewPostHeader => NewPostHeaderCreated => UploadFiles => FilesUploaded
将状态标志管理为状态，例如headerAdding，fileUploading ...，以将当前过程通知您的视图组件。

希望我的解释很清楚，对您有帮助。

NGRX调度操作后上传文件

1 个答案: