如何以优雅的方式组合辅助图和排气板？

Question

我有一个带有recaptcha的CreateReviewform，我有3个流：

• NGRX Action（addReview）（第一个可观察到）。每次触发此操作时，我都必须调用this.recaptchav3service.execute（）方法，该方法返回使用Token（string）（2nd observable）返回可观察到的方法。然后使用此令牌我必须调用API方法来创建评论this.reviewapiservice.create（{...评论，recaptchavalue：token}）），它可以用创建的评论返回可观察的评论（3trd observable可观察到）

首先，我使用combineLatest尝试过它，但它并不像我预期的那样工作。仅当我第一次单击“添加评论” BTN时，才能获得令牌发射值的方法。下次，它都没有发出任何值（使用使用相同的方式。我也尝试

createReview$ = combineLatest([
    this.actions$.pipe(
        ofType(ReviewsDialogActions.addReview)
    ),
    this.recaptchaV3Service.execute('AddREview')
]).pipe(exhaustMap(([{ review }, token]) => 
    this.reviewApiService.create({ ...review, recaptchaValue: token })))
        .pipe(
            map(createdReview => ReviewsDialogApiActions.createReviewSuccess({ createdReview, companyId: createdReview.company.id })),
            catchError(error => {
                debugger;
                return observableOf(ReviewsDialogApiActions.createReviewError({ error: error.error.message.join(', ') }))
            })

。

过 /code>它可以正常工作，但我不喜欢它的外观，我认为它看起来像这样

createReview$ = createEffect((): any => {
let reviewFormData = {};
return this.actions$.pipe(
    ofType(ReviewsDialogActions.addReview),
    concatMap(({ review }) => {
        reviewFormData = review;
        return this.recaptchaV3Service.execute('AddREview');
    }),
    exhaustMap((token) => this.reviewApiService.create({ ...<Review>reviewFormData, recaptchaValue: token })
        .pipe(map(createdReview => ReviewsDialogApiActions.createReviewSuccess({ createdReview, companyId: createdReview.company.id })),
        catchError(error => {
            return observableOf(ReviewsDialogApiActions.createReviewError({ error: error.error.message.join(', ') }))
        })))
)

}

请帮助这是RXJS运营商的最佳组合吗？

Answer 1

combineLatestwith 这样：

createReview$ = createEffect(() => this.actions$.pipe(
    ofType(ReviewsDialogActions.addReview),
    combineLatestWith(this.recaptchaV3Service.execute('AddREview')),
    exhaustMap(([reviewFormData, token]) => this.reviewApiService.create(..)
        ...
    )
)

您可以使用可管道的操作员