将许多可观察对象组合成一个对象的简单方法答案

【问题标题】：Simple way to combine many observables into one object将许多可观察对象组合成一个对象的简单方法
【发布时间】：2020-09-18 20:38:31
【问题描述】：

我需要从来自 ngrx 状态的几个可观察对象构建一个对象。

    public readonly comibiedToOneObject$ = zip(
    this.store$.select(selectObs1),
    this.store$.select(selectObs2),
    this.store$.select(selectObs3),

    ...

    this.store$.select(selectObsN),
  ).pipe(
    map(([
           obs1,
           obs2,
           obs3,

            ...

           obsN
         ]) => {
      return {
           obs1,
           obs2,
           obs3,

            ...

           obsN
      };
    }),
  );

我怎样才能使这段代码更易读、更好？

【问题讨论】：

您只需要该对象一次吗？或者商店中的所有值都发生了变化？
一次.....
那么我建议使用forkJoin 运算符。它有一种语法，您可以在其中传递具有 Observable 属性的对象，就像我在下面的回答中一样。但是您需要完成 observables，因此您必须在所有输入 observables 之后放置 pipe(first())。如果你不想要这个，你可以使用我提到的库。

标签： angular rxjs javascript-objects ngrx

【解决方案1】：

我会这样做：

merge(
  obs1$.pipe(map((v) => ['obs1', v])),
  obs2$.pipe(map((v) => ['obs2', v])),
  obs3$.pipe(map((v) => ['obs3', v])),
  /* ... */
  obsN$.pipe(map((v) => ['obsN', v])),
).pipe(
  scan((acc, ([k, v])) => {
    acc[k] = v;

    return acc;
  }, {})
)

我相信zip 有更具体的用例，而不仅仅是将 observable 的值组合到一个对象中。

【讨论】：

【解决方案2】：

您可以组合两个 observables...以在两者都已响应时获取响应数据。

fetchData(): Observable<any[]> {
    return combineLatest(
        this.observable1$(),
        this.observable2$()
    );
}

重复：https://stackoverflow.com/revisions/62033110/1

【讨论】：

【解决方案3】：

我会推荐来自rxjs-etc 包的zipObject。它是 RxJS 的主要贡献者之一的扩展库。

用法：

zipObject({
    obs1: this.store$.select(selectObs1),
    obs2: this.store$.select(selectObs2),
    obs3: this.store$.select(selectObs3),

    ...

    obs9: this.store$.select(selectObs9)
})

【讨论】：

【解决方案4】：

let observables = [selectObs1,selectObs2,selectObs3].map((obs) => this.store$.select(obs));

public readonly comibiedToOneObject$ = forkJoin(observables).pipe(map(res) => ({...res}));

【讨论】：