结合多个最新版本的 observable、ngrx
Combine multiple latest version of observable, ngrx
我有一个 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 加载。
用户还可以添加新图片、评论或附件。当他这样做时,状态 pending
设置为 true 的 comment
被添加到评论列表中。当 http 请求解析时,这个 comment
pending 属性 被设置为 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 个参数。想传多少就传多少。
例如:
combineLatest(v1$, v2$, v3$, v4$, (v1, v2, v3, v4) => {
console.log(v1, v2, v3, v4);
})
我有一个 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 加载。
用户还可以添加新图片、评论或附件。当他这样做时,状态 pending
设置为 true 的 comment
被添加到评论列表中。当 http 请求解析时,这个 comment
pending 属性 被设置为 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 个参数。想传多少就传多少。
例如:
combineLatest(v1$, v2$, v3$, v4$, (v1, v2, v3, v4) => {
console.log(v1, v2, v3, v4);
})