使用 rxjs 管理 API 数据响应并管理应用程序状态 - Angular 10

Question

我正在尝试了解从 api 存储（和更新）数据并在兄弟组件之间共享该数据的最佳方式。这是我尝试过的。

保存可观察对象

export class MyExampleService {
   private data: Observable<any>;

   constructor(private readonly http: HttpClient) { }

   getData(): Observable<string[]> {
       //if we already got the data, just return that
       if (data) {
           return data;
       }

       //if not, get the data
       return this.http.get<string[]>('http://my-api.com/get-stuff')
           .pipe(tap((returnedData: string[]) => {
               //save the returned data so we can re-use it later without making more HTTP calls
               this.data= returnedData;
           }));
   }
}

但是这种方法并不能真正满足我的需求，因为它不使用任何主题，并且我想在数据更改时告诉我的其他组件。

使用主题

export class MyExampleService {
   private dataSbj: BehaviorSubject<any> = new BehaviorSubject(null);
   
   readonly data$ = this.dataSbj.asObservable();

   constructor(private readonly http: HttpClient) { }

   getData(): Observable<string[]> {

       if (dataSbj.getValue() === null) {
           return this.http.get<string[]>('http://my-api.com/get-stuff')
           .pipe(tap((returnedData: string[]) => {
               //save the returned data so we can re-use it later without making more HTTP calls
               this.dataSbj.next(returnedData);
           }));
       }          
   }
}

然后我只需在第一次订阅 getData 并订阅所有其他组件中的 data$ observable。 （在这种情况下，我有一个父组件和多个子路由，所以我会在父组件中订阅 getData() 并在所有子路由中订阅 data$。

最后一种方法可行，但我宁愿使用相同的函数来检索相同的数据，而不是通过订阅不同的 observables。

这被认为是一种好方法还是我可以做的更好？

Answer 1

NGRX store 状态管理是在数据可用时从存储读取的方法，而不是进行不必要的网络调用。

它负责通过调度相关操作来创建、更新和删除存储中的记录。

这里是 github 上的完整源代码 DEMO，了解如何使用 ngrx 商店。

我强烈建议使用 ngrx 商店，它有一些很酷的功能，可以避免不必要的网络调用，从而导致您的应用程序加速。

Answer 2

如果您的getData() 方法没有参数，您应该能够通过使用shareReplay() 运算符来执行以下操作。它只会在第一个消费者订阅它时调用 API，并将最后一次发出返回给任何顺序调用。这还包括一种更新数据的方法：

@Injectable({
  providedIn: 'root'
})
export class ExampleService {
  private updateData$ = new BehaviorSubject<void>(void 0); 

  readonly data$ = this.updateData$.pipe(
    switchMap(() => this.http.get('https://reqres.in/api/users')),
    shareReplay(1)
  );

  constructor(private readonly http: HttpClient) {}
   
  refresh(): void {
    this.updateData$.next();
  }
}

export class ExampleComponent {
  data$: Observable<any>;

  constructor(private example: ExampleService) {}

  getApi(): void {
    this.data$ = this.example.data$;
  }

  refresh(): void {
    this.example.refresh();
  }
}

working example查看控制台日志