File upload after NGRX dispatch action

Question

I'm currently using ng2 file upload from valor software to perform image upload to server.

My previous code was written this way: After added a new post, the image uploader will upload the image based on the response id (which is the post 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);
});

I'm learning state management and moving this to NGRX approach and i found it difficult to perform the image upload after added the post because i could not return the post id from the post adding action.

Below is the new approach im trying :

Effect to work with server and add the post.

@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)))
            )
        )
    );

Dispatch add post action :

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

Is there anyway to return the newly added post id from the ngrx effect so that i could perform image uploading based on that?

Thanks

What values are you getting if you put console.log in map of addPost? — KiraAG
Also you need to listen to PostActions.AddSuccess to call file upload. Or you need to use the selector, pick the postId and call the file upload. — KiraAG
@KiraAG Do you mean newPost: PostHeader? This is the newly added post, similar to the response: PostHeader from first approach — scholarwithfire
@KiraAG Do you mean like this? this.store.dispatch(new postHeaderActions.AddToPost(postHeader)); //Call selector to pickup postId and perform image upload — scholarwithfire
Sorry I meant, are you getting values in map of addPost ? — KiraAG

Thierry Falvo Thierry Falvo · Accepted Answer · 2019-06-28T13:21:46

You should change a little the design to better integrate the spirit of NgRx.

I suggest you to :

create a shared service UploadService which hold a reference to FileUploader
this service will listen to FileUploader events, and dispatch actions to inform store (state).
your view component could use FileUploader to manage drop zone for instance (or you should develop this part), but for the rest, it should interact with actions / selectors.
manage a little workflow, like :
- dispatch AddNewPostHeader => NewPostHeaderCreated => UploadFiles => FilesUploaded
manage status flags into state, like headerAdding, fileUploading... to inform your view component of current process.

Hope my explanation is clear, and will help you.

File upload after NGRX dispatch action

1 Answers