NgRx効果を把握するのに苦労しています。
最新リリースのバージョン8を使用して、オブザーバブルとプロミスを組み合わせた次のエフェクトを作成しましたが、正しく作成する方法を理解するのに苦労しています。
これは考えられるすべてのエラーをキャッチすることが保証されていますか？
authLogin$ = createEffect(() => this.actions$.pipe(
ofType(AuthActions.authLogin),
switchMap(async(action) => {
try {
const userState = await this.loginService.login(action.username, action.password);
return AuthActions.authSuccess(userState);
}
catch (error) {
return AuthActions.authLoginError({
error: error
});
}
})
),{ resubscribeOnError: false });
また、この構成の最後のビットを使用する必要があるかどうかも明確ではありません{ resubscribeOnError: false }。これは、後続の実行でまったく新しいオブザーバブルが作成されることを意味しますか？
より良いアプローチはありますか？
これでtry catchすべてのエラー.then().catch()が検出されるかどうかはわかりません。Promiseのみを表示したためですが、このPromiseをObservableに変換してみませんか？それはあなたpipeが書くことと適切に書くことをより簡単にするでしょう。
を使用してswitchMap、PromiseからObservableを返します。
import {from} from 'rxjs';
...
switchMap(action => from(this.loginService.login(action.username, action.password)))
...
その後、catchErrorRxJからのObservable演算子を使用できます。エラーと、caught監視可能なソースであると呼ばれるプロパティを受け取ります（ここのドキュメントから）。どこのことができます
...
catchError((err, caught$) => {
this.store.dispatch(new AuthActions.authLoginError({ error: error }));
return caught$;
})
...
return caught$あなたは、エラーが発生した場合死ぬから、あなたの影響を防ぐための重要な原因です。NgRx 8でそのように処理する必要はなく、簡単にできます。
...
catchError((err, caught$) => {
return of(new AuthActions.authLoginError({ error: error })));
})
...
ただし、{ resubscribeOnError: true }（デフォルト値である）が必要になります。これは、エラーを処理しない場合にエフェクトを再サブスクライブする機能であり、もう一度エフェクトが死ぬのを防ぎます。
そしてcatchError、あなたの後に、あなたはmapこのように成功に戻るのを簡単にすることができます
...
map(userState => new AuthActions.authSuccess(userState))
したがって、完成したコードは次のようになります
authLogin$ = createEffect(() => this.actions$.pipe(
ofType(AuthActions.authLogin),
switchMap(action => from(this.loginService.login(action.username, action.password))),
catchError((err, caught$) => of(new AuthActions.authLoginError({ error: error })))),
map(userState => new AuthActions.authSuccess(userState))
)); // no resubscribeOnError since default value is true
サービスコールにObservableを利用し、責任を分離するオペレーターがいて、NgRxを満足させるので、これはより良いアプローチだと思います。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加