Tengo un servicio que obtiene dos observables, storeValueOne$ y storeValueTwo$ , que son de tipo number y se actualizan con frecuencia pero no al mismo tiempo.
Quiero agregar los valores de storeValueOne , storeValueTwo y almacenarlos en otro observable que realiza un seguimiento de los cambios.
Con ngrx merge puedo combinar los dos observables, pero no tengo claro cómo hacer el cálculo, ya que se actualizan a diferentes velocidades, y tampoco sé cuál cambió su valor.
import { Injectable } from '@angular/core'; import { forkJoin, map, merge } from 'rxjs'; import { UnstableCompComponentTwoStore } from './components/unstable-comp-two/unstable-comp-two.store'; import { UnstableCompStore } from './components/unstable-comp/unstable-comp.store'; @Injectable({ providedIn: 'root' }) export class GlobalStateService { constructor( private storeUnstableOne: UnstableCompStore, private storeUnstableTwo: UnstableCompComponentTwoStore ) { } storeValueOne$ = this.storeUnstableOne.select((state) => state.unstableStateVal); storeValueTwo$ = this.storeUnstableTwo.select((state) => state.unstableStateValTwo); combineData(){ const merged = merge(this.storeValueOne$, this.storeValueTwo$) // merged.forEach(d => console.log(d)) /* value 1 + value 2 */ // mergedState = value1 + value2 } }Parece que necesitas combineLatest :
import { combineLatest } from 'rxjs'; const combined = combineLatest([obs1, obs2]); combined .subscribe(([latest1, latest2]) => console.log({ latest1, latest2 })); Nota: el observable combinado solo emitirá una vez que cada miembro haya emitido al menos una vez.
A partir de ese momento, emitirá cada vez que emita un miembro, brindándole los últimos valores de cada observable, manteniendo el orden original de los observables combinados (por lo que el primer valor en la matriz será el último valor del primer observable combinado).
Visualízalo aquí .
En el ejemplo anterior, si desea convertirlo en un observable del total de los últimos valores de cada observable contenido:
combined.pipe( map(values => values.reduce((o, k) => +o+k, 0)) )una de muchas soluciones:
import { Component, OnInit } from "@angular/core"; import { merge, of } from "rxjs"; @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent implements OnInit { title = "CodeSandbox"; obs1$ = of(1); obs2$ = of(2); ngOnInit() { let sum = 0; merge(this.obs1$, this.obs2$).subscribe((a) => { sum+=a }) console.log(sum) } }pruébalo en codesandbox