完全ではないRxJSストリーム内のネストされたデータ構造を平滑化

Question

ストアから取得した値をフラット化し、ストアが発生したときにそれらを単一の配列として出力したいとします。

同期バージョンでは、私のNo-RxJSの例はかなり簡単ですが、RxJSでどうやって行うのか分かりません。

RxJSを使用して、.nextコールの値をバッファリングできると仮定します。

これにRxJS演算子を使用する必要がありますか？はいの場合、ネストされたデータ構造をフラットにするにはどうすればよいですか？

私が達成しようとしているものの最小の例です。

const store$ = new Rx.BehaviorSubject([]) 
 

 
store$.next([ 
 
    { 
 
    id: 1, 
 
    items: [ 
 
     { 
 
     id: 1, 
 
     title: 'Foo' 
 
     }, 
 
     { 
 
     id: 2, 
 
     title: 'Bar' 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    id: 2, 
 
    items: [ 
 
     { 
 
     id: 3, 
 
     title: 'Fizz' 
 
     }, 
 
     { 
 
     id: 4, 
 
     title: 'Buzz' 
 
     } 
 
    ] 
 
    }, 
 
]); 
 

 
// Desired output: [ "Foo", "Bar", "Fizz", "Buzz" ] 
 

 
store$ 
 
    .filter(({length}) => length > 0) 
 
    .flatMap(group => group) 
 
    .flatMap(({items}) => items) 
 
    .map(({title}) => title) 
 
    .subscribe(console.log) // Emits separate values :-(
 

 
// No-RxJs approach 
 

 
store$ 
 
    .filter(({length}) => length > 0) 
 
    .map(groups => groups 
 
     .map(
 
      ({ items }) => items.map(
 
      ({ title }) => title 
 
     ) 
 
     ) 
 
     .reduce((next, acc) => [ ...acc, ...next ], [])) 
 
    .subscribe(console.log) // Works as expected.

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.1/Rx.js"></script>

Answer 1

コメントに@zeroflaglによって示唆されるように、toArray方法が魅力のように働きました。

完了したオブザーバブルでのみ動作するため、take(1)を使用して現在のストア値で完了観測値を取得するObservableにはswithchMapを割り当てていました。

store$ 
    .filter(({ length }) => length > 0) 
    .switchMap(() => store$.take(1) 
     .flatMap(group => group) 
     .flatMap(({ items }) => items) 
     .map(({ title }) => title) 
     .toArray() 
    ) 
    .subscribe(console.log) // Emits flat array