Группировка двух разных наблюдаемых из двух разных классов rxjs

Question

У меня есть два Observable, передающие данные двух разных классов:

1. Класс пользователя:

{
"id"=>25,
"username"=>"Chris",
.. other data 
}

2. Класс UserWebsocket

 {
     "user_id"=>25,
     "age"=>25,
      .. other data 
  }

Я хочуобъединить и сгруппировать две наблюдаемые по атрибуту user_id или id.Таким образом, результат слияния и группировки типа:

[User|undefined,UserWebsocket|undefined]

Чтобы проиллюстрировать вопрос, я сделал простую диаграмму мрамора:

Как это может произойти?

Answer 1

Поскольку комментарий Мартина предлагает использовать объединение и задайте начальное значение для каждой части.Предполагая, что у вас есть myUser$ и myUserWebsocket$ наблюдаемые, вы можете использовать следующий код для их объединения.Сначала добавьте начальное значение и сохраните наблюдаемые в новых.Объедините их с combineLatest.Вы должны подписаться на un cold combined$ observable.

UPDATE

Другой подход - использование merge и объединение его с withLatestFrom.

// Using RxJS v6+
import { merge } from 'rxjs';
import { startWith, map, withLatestFrom } from 'rxjs/operators';

// Your allready defined observables named e.g. myUser$ and myUserWebsocket$
// Add a starting value, since if user fires, websocket has no value yet.
const user$ = myUser$.pipe(
  startWith(undefined)
)
const userWebsocket$ = myUserWebsocket$.pipe(
  startWith(undefined)
)

const combined$ = merge(
  user$,
  userWebsocket$
).pipe(
  withLatestFrom(user$),
  withLatestFrom(userWebsocket$),
  map(([[merge, latestUser], latestWebsocket]) => {
    if (merge.user_id) { // merge is typeof userWebsocket, make sure user does not have user_id property
      if (latestUser && merge.user_id === latestUser.id) {
        return [latestUser, merge];
      } else {
        return [undefined, merge];
      }
    } else if (merge.id && !merge.user_id) { // merge is typeof user
      if (latestWebsocket && merge.id === latestWebsocket.user_id) {
        return [merge, latestWebsocket];
      } else {
        return [merge, undefined];
      }
    }
  })
);

combined$.subscribe([user, websocket] => {
  console.log(user, websocket);
});