Promise内NGRX效果

Question

I have been struggling to make this work. I am listening to setTeam action and checking if the image is null from the payload. If it's null, call the API and get blob and convert it to base64 and dispatch update action.

The code looks like this.

fetchImage = createEffect(() =>
    this.actions$.pipe(
        ofType(teamActions.setTeam),
        withLatestFrom(this.store.pipe(select(selectTeam))),
        switchMap(([payload]) => {
            if (!payload.team.teamLogoImage) {
                return this.teamService.getImage(payload.team.id)
                    .pipe(map((value => {
                        ImageUtils.getBase64(value); //returns promise
                        return teamActions.updateTeamLogoImage({teamLogoImage: val});
                    })))
            }
        })
    ));

The problem here is ImageUtils.getBase64 returns Promise and I need to wait till this promise is resolved before dispatching updateTeamLogoImage action. How can this be achieved?

Answer 1

You can put the Promise in RxJS from function and handle ImageUtils.getBase64 as Observable in pipe.