2017-03-30 3 views
2

私は現在、約束からオブザーバブルに切り替えました。私はRedux-Observableを使って私の反応アプリを使っています。基本的には、複数の同時のajax呼び出しを有効にし、すべてのオブザーバブルが正常に実行を完了したときに応答を返す最高の演算子を探しています。 ここに私のアプリからのコードスニペットがあります。Rxjsを使った同時Ajaxリクエスト

let epicPostAd = (action$, store, {ajax}) => 
    action$.ofType(POST_AD) 
    .debounceTime(1000) 
    .mergeMap(({ payload }) => 
    ajax(generateAjaxRequestSetting(POSTS_URL, 'post', payload,CT_JSON)) 
     .map(response => postAdSuccessful(response)) 
     .catch(e => Observable.of(postAdUnsuccessful(e.xhr.response))) 
     .takeUntil(action$.ofType(LOCATION_CHANGE)) 
    ) 

ポストが広告を与えられ、応答が他の201エラーにPOST_AD_UNSUCCESSFULを派遣する場合POST_AD_SUCCESSFULを送出するという単純なAJAX要求です。 しかし、問題は、応答があるときに、その後のajax観測可能なストリームを作りたいということです。あなたがこれを達成するための最適な方法を教えていただければ、私は感謝します。

答えて

4

あなたはforkJoin operatorを探しているようですね。

あなたが渡したObservablesをすべて購読し、すべての後に、配列の中から最後の値を出します。

あなたの叙事詩にあなたがこれをやってみたかった場所それは完全に明確ではなかったので、私はちょうど一般的な例を作った:

技術
const somethingEpic = (action$, store, { ajax }) => 
    action$.ofType(SOMETHING) 
    .mergeMap(() => 
     Observable.forkJoin(
     ajax('/first'), 
     ajax('/second'), 
     ajax('/third') 
    ) 
     .do(results => { 
     // the results is an array, containing each 
     const [first, second, third] = results; 
     console.log(first, second, third); 
     }) 
     .map(results => ({ 
     type: 'SOME_RESULTS', 
     results 
     })) 
    ); 

、それはあなたが代わりに使用するのでは使用することができ、最終的なresultSelector引数をサポートしていますそれ以降はmapの演算子ですが、私はそれを使用しない傾向があります。なぜなら、一般的に還元的に観測可能なスタイルケースでは、パフォーマンス上のメリットはごくわずかです。しかし、それはまだ知っていることは良いです。 「これをアクションに変換する」よりも、より多くの「データ正規化」のために便利です。 ALSO

const somethingEpic = (action$, store, { ajax }) => 
    action$.ofType(SOMETHING) 
    .mergeMap(() => 
     Observable.forkJoin(
     ajax('/first'), 
     ajax('/second'), 
     ajax('/third'), 
     results => ({ 
      type: 'SOME_RESULTS', 
      results 
     }) 
    ) 
    ); 

、あなた自身を求めているならば、 "私は何演算子を使うのですか?"言う部分までhttp://reactivex.io/rxjs/

スクロール:あなたは、ドキュメントにあるオペレータ・ウィザードを試してみてください

あなたはあなたの問題のためにオペレータを見つける必要がありますか?私は私が持って観察可能な既存のもの、と...

  • 私はいくつかの観測が観測一つとして一緒に結合しなければならない、と...
  • を持って

    • :以下のリストからオプションを選択して起動しますまだオブザーバブルではありません。

    ヒント:DevToolsを開いてRxJSを試してみてください。

  • ものの、この場合には、forkJoinが正しく提案されていますが、それをクリックしたときに、それはまだ文書化されていない:sadfaceを:しかし、Google検索は、どのようなそれがないと使用方法を説明するさまざまなウェブサイトを提示します(RxJSと他の言語の他のRx実装では)。Like this helpful website

    +0

    そのウィザードはきれいです!より顕著にする必要があります。私はこれまで気付かなかった。 – cartant

    +0

    ジェイ、素早く答えてくれてありがとう。あなたは男です! – grustamli

    +0

    そして私はそれが私のケースに合っていることを確認し、魅力のように動作します – grustamli

    0

    ここに私自身の質問に対する答えがあります。 JayPhelpsは答えましたが、私の質問はあまり明確ではないことに気付きました。ジェイの推薦を使用します。私は、次のを思い付いた:

    let epicPostAd = (action$, store, {ajax, observable}) => 
        action$.ofType(POST_AD) 
        .debounceTime(1000) 
        .mergeMap(({ payload }) => 
        ajax(generateAjaxRequestSetting(POSTS_URL, 'post', payload, CT_JSON)) 
         .mergeMap(response => 
         observable.forkJoin(
          ajax(''), 
          ajax('') 
         ) 
         .do(res => { 
         const [first, second, third] = results; 
         console.log(first, second, third); 
         }) 
         .map(res => postAdSuccessful(res)) 
        ) 
        .catch(e => observable.of(postAdUnsuccessful(e.xhr.response))) 
        .takeUntil(action$.ofType(LOCATION_CHANGE)) 
    

    だからここにそれがどのように動作しますか。投稿要求を行い、Ajaxリクエストの実行が終了した直後に、.mergeMap ajax ovservablesのストリームへの応答を.forkJoin()で返します。その後、結果を処理します

    +0

    **ちょっとでも**私が追加した '.do()'演算子の使い方は、デバッグツールとしては完全にオプションであることを指摘したいと思います。 – jayphelps

    +0

    ありがとうございました。 – grustamli

    関連する問題