は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;
}
}
combineLatestは、X引数を取ることができます。あなたは好きなだけ多くを渡すことができます。 – Maxime
また、1つのトリガーが必要なのか、または観測可能な状態を維持していますか? combineLatestは危険な可能性があるためです。あなたはwithLatestFromを見てみたいと思うかもしれませんし、あなたのニーズに合っていれば、これを使ってください。 (わからないのであれば、もっと文脈を与えてください) – Maxime
@Maximeもう少し文脈を追加しました。それはあなたが望む文脈のタイプですか? – Ced