Redux Observableで一連のアクションを待つ

Question

Redux Observablesを使用して別のものをディスパッチする前に、一連の処理を待つ必要があるユースケースがあります。私はいくつかの同様の質問を見たことがありますが、私はどのように私が与えられたユースケースにこれらのアプローチを使用することができるのかわかりません。本質的には

は、私はそうのような何かをしたい：私もキャンセルし、タイプ例えばFETCH_ERROR火災の再あれば、別のアクションを介してそのシーケンスを開始したいと思います

action$ 
    .ofType(PAGINATION_CLICKED) // This action occurred. 
    .ofType(FETCH_SUCCESS) // Then this action occurred after. 
    .map(() => analyticsAction()); // Dispatch analytics. 

。

Answer 1

重要な点は、action$は、すべてのアクションがディスパッチされたときのホット/マルチキャストストリームであることです（これはSubjectです）。それが熱くなるので、我々はそれを複数回組み合わせることができ、彼らはすべて同じ行動の流れを聞いているでしょう。

// uses switchMap so if another PAGINATION_CLICKED comes in 
// before FETCH_SUCCESS we start over 

action$ 
    .ofType(PAGINATION_CLICKED) 
    .switchMap(() => 
    action$.ofType(FETCH_SUCCESS) 
     .take(1) // <-------------------- very important! 
     .map(() => analyticsAction()) 
     .takeUntil(action$.ofType(FETCH_ERROR)) 
); 

だから我々はPAGINATION_CLICKEDを受け取るたびに、我々は、単一のFETCH_SUCCESSをリッスンその内側の観察可能なチェーンを聴き始めます。それ以外の理由で、FETCH_SUCCESSが奇妙なバグの原因となる可能性があり、そうでない場合でも必要なものだけを取ることが一般的にベストプラクティスであるため、引き続きこれを聞きますので、.take(1)が重要です。

FETCH_ERRORを最初に受け取った場合は、takeUntilを使用してFETCH_SUCCESSの待機をキャンセルします。ボーナスとして

---

あなたはあまりにもエラーに基づいていくつかの分析ものを行うためにもしたい決定した場合、次の2つのストリーム間の実際のレースにraceを使用することができ、やり直すだけではなく。最初に出すもの、勝つ;もう1つは登録解除されています。

action$ 
    .ofType(PAGINATION_CLICKED) 
    .switchMap(() => 
    Observable.race(
     action$.ofType(FETCH_SUCCESS) 
     .take(1) 
     .map(() => analyticsAction()), 
     action$.ofType(FETCH_ERROR) 
     .take(1) 
     .map(() => someOtherAnalyticsAction()) 
    ) 
); 

は、ここで同じことだが、代わりに静的なもののインスタンスオペレーターとしてraceを使用します。これはあなたが選ぶことができる文体の好みです。彼らはどちらも同じことをします。あなたにはっきりしたものを使用してください。

action$ 
    .ofType(PAGINATION_CLICKED) 
    .switchMap(() => 
    action$.ofType(FETCH_SUCCESS) 
     .map(() => analyticsAction()) 
     .race(
     action$.ofType(FETCH_ERROR) 
      .map(() => someOtherAnalyticsAction()) 
    ) 
     .take(1) 
);