angular - 结合多个最新版本的 observable、ngrx

Question

我有一个产品，其中附有评论、附件、图像。所有这些项目都取自 ngrx 存储，这意味着所有这些项目都是可观察的。我的问题是如何组合这些项目？

通常我做的是使用:

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

然而，combineLatest 使用 2 组可观察对象，我有 4 个。那么最简单的方法是什么？

---

这里有更多的上下文:

所以我们显示一个产品列表，当每个产品被点击时，更多关于产品的信息被加载并显示在弹出窗口中。这些信息包含评论、附件和图片。此步骤可称为 DEEP_LOADING 阶段，当用户点击产品时，评论、附件和图像将通过 http 加载。

用户还可以添加新图像、评论或附件。当他这样做时，状态 pending 设置为 true 的 comment 被添加到评论列表中。当 http 请求解析时，此 comment 挂起属性设置为 false。

当用户关闭弹出窗口并打开新产品时，将加载新的评论、附件 和图像。这次他关闭弹出窗口并打开他打开的第一个弹出窗口时，显示的 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;
    }
}

Answer 1

combineLatest 可以接受 X 个参数。您可以传递任意数量的传递。

例如:

combineLatest(v1$, v2$, v3$, v4$, (v1, v2, v3, v4) => {
  console.log(v1, v2, v3, v4);
})