同期データとして必要なときにRxJS Observablesを正しく動作させる方法

Question

トピックは多分理解できます。

私はかなり新しいRxJSとRedux世界です。私はObservablesとNgRX storeとAngular 2+アプリに取り組んでいます。

私はさまざまな部分があります。ここで私が必要とするのは、あるスライスからプロパティを取得し、異なるプロパティを持つAssetFileオブジェクトのArrayを受け入れるdownloadServiceに渡すことです。

constructor(
    private store: Store<AppState>, 
    private downloadService: DownloadService) { 
    this.selectedAssets$=this.store.select('selectedAssets') 
    this.selectedAssets$.subscribe(asset => this.assetsSelected = asset) 
    } 

私はその部分を正しく実行したかどうかはわかりません。 UIで、選択されたAssetがStore.selectedAssetsにディスパッチされたとき。ここではthis.selectedAssets $に割り当て、選択したオブジェクトの配列であると仮定する別の変数this.assetsSelectedを作成します。

次に、ファイルをダウンロードするための準備をする機能があります。それぞれの資産はassetFilesという種類のプロパティを持っています。最後にFile[]のタイプがありますが、そのうちのArrayが必要です。

prepareFilesToDownload(){ 
     let files = [] 
     let preparedFiles = this.assetsSelected.map(asset => { 
     asset.assetFiles.map(file=>{ 
     files.push(file) 
     }) 
    }) 
    return files 
    } 

このコードは動作しますが、私はそれがこのようなことを行うための適切な方法ではないと信じています。私はちょっと失った。

たぶん私は少ないコードと直接Observablethis.selectedAssets$=this.store.select('selectedAssets')

からUPDATEでこの結果を達成することができます：ここで

constructor(
    private store: Store<AppState>, 
    private downloadService: DownloadService) { 
    this.selectedAssets$=this.store.select('selectedAssets') 
    } 

私は、単一のアレイに配列の配列を組み合わせることRamdaからflatten方法を使用していました。

prepareFilesToDownload(){ 
    let files 
    this.selectedAssets$.subscribe(
     assets => { 
     files = R.flatten(assets.map(asset => asset.assetFiles.map(file => file))) 
     } 
    ).unsubscribe(); 
    return files 
    } 

Observablesを使用する適切な方法であるかどうかは少し良くなりますが、まだわかりません。私は、RxJS演算子を使って観測できるthis.selectedAssets$からこの配列をまっすぐに返す方が良いと思います。しかし、そうする正しい方法を見つけることができません。

片側の質問です。 2番目の例のように.subscribeと.unsubscribeが正しいですか、代わりに.take(1)を使用できますか？

Answer 1

私はあなたの2番目の選択肢がはるかに優れていると思うし、地元の変数とサブスクリプションを削除することにスポットを当てていたと思います。正しく取得したら、ユーザーが「ダウンロード」を選択するか、ファイルで何らかの操作を行うと、getファイルと処理が使用されます。この場合、チェーン全体を1か所でトリガーしないのはなぜですか？

this.selectedAssets$ 
    .map(this.prepareFiles) 
    .do(this.downloadFiles) // or process files 
    .take(1) 
    .subscribe(); // you must do this to make the observable hot 

これは、unsubscribeにも関連しています。それがうまく動作していなくても、それがtake(1)よりも読みにくくて標準的ではありません。