45

redux-observableミドルウェアの単一の叙事詩で複数の還元アクションをディスパッチする方法を探しています。

私が次のエピックを持っているとしましょう。イベントが発生するたびに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
         } 
    })

この単純な例では、非常に簡単です。しかし、エピックが成長すると、他のアクションをトリガーすることを唯一の目的とする多くの還元アクションを自分自身が持っていることに気付く傾向があります。さらに、rxjs コードの一部を繰り返す必要があります。私はこれが少し醜いと思います。

それで、私の質問: 単一のエピックで複数の還元アクションをディスパッチする方法はありますか?

4

2 に答える 2

57

イン/アウトの比率を 1 対 1 にする必要はありません。したがって、必要に応じてmergeMap(aka )を使用して複数のアクションを発行できます。flatMap

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))
        ))
    )

Observable を受け入れる Rx 演算子は、Promise、Array、または Iterable も受け入れることができることに注意してください。それらをストリームであるかのように消費します。したがって、代わりに配列を使用して同じ効果を得ることができます。

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

どちらを使用するかは、個人のスタイルの好みとユースケースによって異なります。

于 2016-11-30T18:28:09.183 に答える