redux-observable - 1つの叙事詩に複数のレビュックスアクションをディスパッチ

Question

私はredux-observableミドルウェアの1つのEpicで複数のレビュックスアクションをディスパッチする方法を探しています。

次のようなEpicがあるとします。 SEARCHイベントが発生するたびに、Epicはバックエンドからデータをロードし、RESULTS_LOADEDアクションをディスパッチします。

searchEpic = (action$) => 
    action$ 
    .ofType('SEARCH') 
    .mergeMap(
     Observable 
     .fromPromise(searchPromise) 
     .map((data) => { 
      return { 
       type: 'RESULTS_LOADED', 
       results: data 
      } 
     }) 
    ) 

さて、私はsearchPromiseが解決されたときに、追加のアクションをディスパッチ必要があるとしましょう。

これを行う最も簡単な方法は、RESULTS_LOADEDを聞き、第2のアクションをディスパッチする第2の叙事詩があるようです。そうですね：

resultsLoadedEpic = (action$) => 
    action$ 
    .ofType('RESULTS_LOADED') 
    .map(({results} => { 
     return { 
      type: 'MY_OTHER_ACTION', 
      results 
     } 
    }) 

この簡単な例では、非常に簡単です。しかし、Epicsが成長したとき、私は他の行動を誘発することが唯一の目的である、多くの還元的行動を取っていることが分かります。さらに、いくつかのrxjsコードを繰り返す必要があります。私はこれが少し醜いと思う。

私の質問：単一のEpicに複数のreduxアクションをディスパッチする方法はありますか？

Answer 1

1対1の入力/出力比を指定する必要はありません。あなたがする必要があるのであれば、あなたは（別名flatMap）mergeMapを使用して複数のアクションを発することができる。また、観測を受け入れる任意のRxオペレータは約束、アレイ、または反復処理可能に受け入れることができる

const loaded = (results) => ({type: 'RESULTS_LOADED', results}); 
const otherAction = (results) => ({type: 'MY_OTHER_ACTION', results}); 

searchEpic = (action$) => 
    action$ 
    .ofType('SEARCH') 
    .mergeMap(
     Observable 
     .fromPromise(searchPromise) 
     // Flattens this into two events on every search 
     .mergeMap((data) => Observable.of(
      loaded(data), 
      otherAction(data)) 
     )) 
    ) 

は注意。彼らがストリームだった場合、それらを消費します。したがって、同じエフェクトの代わりに配列を使用することができます：

.mergeMap((data) => [loaded(data), otherAction(data)]) 

あなたが使用するのは、あなたの個人的なスタイルの好みや使用方法によって異なります。