Question

我有一个product，附有comments，attachments，images。所有这些项目都来自ngrx商店，这意味着所有这些商品都是可观察的。我的问题是如何组合这些项目？

通常我所做的就是使用：

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

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

以下是更多背景信息：

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

用户还可以添加新图像，评论或附件。当他这样做时，将状态comment设置为true的pending添加到注释列表中。当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;
    }
}

Answer 1

combineLatest可以带X参数。您可以根据需要传递任意数量。

例如：

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

结合多个最新版本的observable，ngrx

1 个答案: