来自 Angular Redux Store 的 SwitchMap 结果

Posted 2023-02-19

【中文标题】来自 Angular Redux Store 的 SwitchMap 结果

【英文标题】：SwitchMap result from Angular Redux Store

【发布时间】：2022-01-14 11:02:52

【问题描述】：

我有一个 redux 商店，我在其中保存了一系列值，在这种情况下，合作伙伴看起来像：

partners: [ id: 1, name: 'partner 1', partnerCode: 'ABC123', ... , id: 2, name: 'partner 2', partnerCode: 'CDE567', ..., ...];

我使用以下方法获取合作伙伴：

this.store.select('partnerFunc').subscribe(data  => 
  this.partner = data.partners.find(t => t.partnerId === this.id);
);

我希望在我得到结果后能够执行和操作，根据返回的合作伙伴代码进行 API 调用。

this.dataService.getUsers(partnerCode).subscribe(data =>  this.users = data; );

我想我需要使用 switchMap，因为一旦我有我认识的相关合作伙伴想要订阅 redux 商店。我尝试了很多组合并在这里到处寻找，但似乎无法弄清楚格式。

这是我想出的最好的尝试并解释我正在尝试做的事情：

this.store.select('partnerFunc').pipe(switchMap(result => 
  return result.partners.find(t => t.partnerId === this.id);
)).subscribe(value => 
  this.dataService.getUsersForPartner(value.partnerId).subscribe(data => 
    this.users = data;
  )
);

但是第一行的结果是抛出一个错误：

Argument of type '(result: State) => IPartner' is not assignable to parameter of type '(value: State, index: number) => ObservableInput<any>'.

谢谢

【参考方案1】：

根据您所描述的内容和您在此处显示的代码，这是我的最佳猜测：

this.store.select('partnerFunc').pipe(
  map(result => 
    result.partners.find(t => t.partnerId === this.id)
  ),
  switchMap((partnerId) => 
    this.dataService.getUsersForPartner(partnerId)
  )
).subscribe(data => 
  this.users = data
);

高阶运算符的意义在于它为您管理订阅，这就是您避免嵌套订阅（并避免一整类可能的错误）的方式。您会注意到这里只需要订阅一次。