web-dev-qa-db-ja.com

tap（）vs subscribe（）でクラスプロパティを設定する

私はrxjsを初めて使用しますが、ストリームをパイピングしてタップすることでクラスプロパティを設定しても大丈夫なのか、それともサブスクライブで実行する必要があるのか​​疑問に思っていました。私にはどちらの方法でも機能しますが、自分の目に合っていると思うのでそれをしても大丈夫なのか、それとも気付いていないものがあるのか​​疑問に思うだけです。

両方の方法を示すTypeScriptコード：

export class ViewComponent implements OnInit {

  applicant = {};

  constructor(public route: ActivatedRoute, private store: Store<any>) {}

  ngOnInit() {
    this.route.paramMap.pipe(
      switchMap(params => this.store.select(state => state.applicants.entities[params.get('id')])),
      tap(applicant => this.applicant = applicant)
    ).subscribe();
  }
}

対

export class ViewComponent implements OnInit {

  applicant = {};

  constructor(public route: ActivatedRoute, private store: Store<any>) {}

  ngOnInit() {
    this.route.paramMap.pipe(
      switchMap(params => this.store.select(state => state.applicants.entities[params.get('id')]))
    ).subscribe(applicant => this.applicant = applicant);
  }
}
angulartypescriptrxjssubscribetap
18
bulforce

良い質問。 tap演算子の ソースコード で、このコメントはかなり要約しています。

この演算子は、Observablesを正しい値でデバッグしたり、他の副作用を実行したりするのに役立ちます。
注：これは、Observableのsubscribeとは異なります。 doによって返されるObservableがサブスクライブされていない場合、Observerによって指定された副作用は発生しません。したがって、doは既存の実行を単にスパイし、subscribeのように実行をトリガーしません。

tapで実行できる副作用は、おそらくsubscribeブロックにも配置できます。 subscribeは、「このオブザーバブルが発行されたら、その値をapplicants変数に保存したい」と言っているため、ソース値をアクティブに使用する意図を示します。 tap演算子は主にデバッグ用にありますが、副作用を実行するためにを使用できます。

一般的に、副作用の実行にはsubscribeブロックを使用し、デバッグにはtapを使用しますが、必要に応じてtapがより多くの処理を実行できることに注意してください。

20
vince

tapは、オブザーバブルをそのサブスクライバーから分離している場合に役立ちます。オブザーバブルを公開するクラスがある場合、tapを使用して、誰かがオブザーバブルに対してlisteningのときにこのクラスを実行する必要がある副作用を実装できます。反対側では、別のクラスからサブスクライブするときに、subscribeを使用して、サブスクライバーの観点から副作用を実装できます。

オブザーバブルを持つクラス：

public dummyObservable: Observable<number> = from([1, 2, 3, 4, 5]).pipe(
  // Side effects, executed every time I emit a value
  // I don't know which side effects implements who subscribes to me
  tap( n => console.log("I'm emitting this value:", n) )
);

サブスクリプションを持つクラス：

ngOnInit(): void {
  this.dummyService.dummyObservable.subscribe(
    // Side effects, executed every time I receive a value
    // I don't know which side effects implements the observable
    data => console.log("I'm receiving this value: ", data)
  );
}
10
mariogl