2017-12-13 5 views
4

comments,attachments,imagesとなります。これらのアイテムはすべてngrxストアから取得されます。つまり、これらのアイテムはすべてオブザーブ可能です。私の質問は、どのようにそれらのアイテムを組み合わせるのですか?observableの複数の最新バージョンを組み合わせると、

は通常、私は何をすべきかを使用することである:

combineLatest(selectProducts, selectProductComments, (products, comments) => { 
    // attach comments to products here 
}) 

しかしcombineLatestは、観察の2セットで動作し、私はそれらの4を持っています。だから、これを行う最も簡単な方法は何ですか?ここで


は、より多くのコンテキストである:

だから我々は、各製品をクリックしたときに、製品の詳細情報がロードされ、ポップアップで表示され、productsの一覧を表示します。これらの情報には、comments,attachmentsおよびimagesが含まれています。このステップはDEEP_LOADINGフェーズと呼ばれることがあります。ユーザーが製品をクリックすると、コメント、添付ファイル、画像がhttpで読み込まれます。

ユーザーは、新しい画像、コメント、または添付ファイルを追加することもできます。彼がそうするとき、pendingがtrueに設定されたcommentがコメントのリストに追加されます。 http要求が解決すると、このcommentの保留中のプロパティはfalseに設定されます。

ユーザがポップアップを閉じて新しい製品を開くと、新しいcomments,attachmentsおよびimagesがロードされます。この時間に彼はポップアップを閉じて最初に開いたものを開きます。commentsはバックエンドから読み込まれたものです(前と同じですが)もしあれば保留中のコメントもあります。

コメントリデューサーは次のようになります(私は自分の店舗を正規化する過程にあるため、コメントは製品の一部であり、私は保留中のものに気を付ける必要はない)

export function commentReducer(state, action) { 
    switch (action.type) { 
     case 'SET_COMMENT': 
      // when we set we have to keep the pending comments, 
      // so when we open another product, then switch back to the original one 
      // if the pending comment is still pending it should display as pending 
      const newState = state.filter((c: AppComment) => c.pending); 
      newState.push(action.payload); 
      return newState; 
     case 'CLEAR': 
      return initialState; 
    } 
} 
+4

combineLatestは、X引数を取ることができます。あなたは好きなだけ多くを渡すことができます。 – Maxime

+0

また、1つのトリガーが必要なのか、または観測可能な状態を維持していますか? combineLatestは危険な可能性があるためです。あなたはwithLatestFromを見てみたいと思うかもしれませんし、あなたのニーズに合っていれば、これを使ってください。 (わからないのであれば、もっと文脈を与えてください) – Maxime

+0

@Maximeもう少し文脈を追加しました。それはあなたが望む文脈のタイプですか? – Ced

答えて

2

combineLatestはX引数を取ることができます。あなたは好きなだけ多くを渡すことができます。例えば

combineLatest(v1$, v2$, v3$, v4$, (v1, v2, v3, v4) => { 
    console.log(v1, v2, v3, v4); 
}) 
関連する問題