Загрузка файла после действия отправки NGRX

Question

В настоящее время я использую загрузку файла ng2 из программного обеспечения valor для загрузки изображения на сервер.

Мой предыдущий код был написан так: После добавления нового сообщения загрузчик изображений загрузит изображение на основе идентификатора ответа (который является идентификатором сообщения).

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, и мне было трудно выполнить загрузку изображения после добавления публикации, поскольку я не мог вернуть идентификатор записи из действия добавления записи.

Ниже приведен новый подход, который я пробую:

Эффект для работы с сервером и добавления поста.

@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, чтобы я мог выполнять загрузку изображений на основе этого?

Спасибо

Answer 1

Вы должны немного изменить дизайн, чтобы лучше интегрировать дух NgRx.

Я предлагаю вам:

• создать общую службу UploadService, которая содержит ссылку на FileUploader
• эта служба будет прослушивать FileUploader события и отправлять действия для информирования хранилища (состояния).
• ваш компонент представления может использовать, например, FileUploader для управления зоной удаления (или вы должны разработать эту часть), но в остальном он должен взаимодействовать с действиями / селекторами.
• управлять небольшим рабочим процессом, например:
  • рассылка AddNewPostHeader => NewPostHeaderCreated => UploadFiles => FilesUploaded
• переводит флаги состояния в состояние, например headerAdding, fileUploading ..., чтобы сообщить компоненту представления о текущем процессе.

Надеюсь, мои объяснения ясны и помогут вам.