Question

我正在尝试了解这种rxjs方案。有关交互式应用程序，请参见：Stackblitz app。另外，下面还包含了代码要点。

目标是为Angular应用创建基于rxjs的数据存储。我知道ngrx是为此构建的。这是朝着这个方向迈出的一步，了解ngrx和rxjs。

在大多数情况下，此示例可以满足我的需求。我们有以下内容：

BehaviorSubject 根据用户互动进行更新
Lookup Observable 取决于BehaviorSubject（在应用程序中，这会导致api调用）
Lookup Observable 的多个订阅者在收到更改后会更新其本地状态

我的问题是：为什么第一个订阅者获得初始状态，而第二个订阅者却没有？是否有更好的操作员使用？还是一般而言更好的方法？

背景/导致此问题的原因：如果删除share()，则会看到我遇到的原始问题，每次订阅都会产生副作用。这导致了额外的重复的api调用。

更新1

我认为解决此问题的一种方法是使用主题而不是BehaviorSubject。这样可以避免初始发射。

import { Observable, BehaviorSubject } from 'rxjs';
import { map, share, tap } from 'rxjs/operators';

interface DataItem {
  key: string;
  value: string;
}

const dependantValue$ = new BehaviorSubject([]);

let sideEffectCount = 0;

const lookup$: Observable<[string]> = dependantValue$.pipe(
  tap(() => console.log(`SIDE EFFECT: ${++sideEffectCount}`)),
  // convert array to hash data structure
  map(items => items.reduce((hash, item) => ({ ...hash, [item.key]: item.value }), {})),
  share()
);

// 1st subscription
lookup$.subscribe(lookup => {
  const value = lookup['1'];
  console.log(`SUBSCRIBER1: ${value}`);
});

// 2nd subscription
lookup$.subscribe(lookup => {
  const value = lookup['2'];
  console.log(`SUBSCRIBER2: ${value}`);
});


dependantValue$.next([
  {
    key: '1',
    value: 'A'
  },
  {
    key: '2',
    value: 'B'
  },
  {
    key: '3',
    value: 'B'
  }
]);

创建多播数据存储

0 个答案: