Ngrx 选择器未触发更新答案

【问题标题】：Ngrx selector not triggering updatesNgrx 选择器未触发更新
【发布时间】：2018-11-13 13:51:26
【问题描述】：

我的状态是：

export interface RequestState {
  tabsContent: TabContent[];
}

其中TabContent 表示包含 1 个请求和附加信息的可视选项卡数组：

export interface TabContent {
  tabInfo: TabInfo;
  request: Request;
  results?: any[];
}

我有这个专门的选择器可以从单个 TabContent 中获取一个请求：

export const getRequestForTabInfo = (tabInfo: TabInfo) => createSelector(
  getTabContent,
  (tabContent: TabContent[]) => {
    const tabContentFiltered = tabContent.filter(tab =>
      tab.tabInfo.id === tabInfo.id
      && tab.tabInfo.index === tabInfo.index
      && tab.tabInfo.state === tabInfo.state);
    if (tabContentFiltered && tabContentFiltered.length === 1) {
      return tabContentFiltered[0].request;
    }
    return {} as Request;
  },
);

这是获取所有 TabsContent 的基本方法：

export const getTabContent = createSelector(
  getRequestFeatureState,
  state => state.tabsContent,
);

基于此 FeatureSelector ：

const getRequestFeatureState = createFeatureSelector<RequestState>('requests');

在外观服务中定义：

tabsContent$: Observable<TabContent[]>;
constructor(private store: Store<fromRequest.State>) {
    this.tabsContent$ = this.store.pipe(
      select(fromRequest.getTabContent),
      takeUntil(this.componentDestroy()),
    );
}
  public getRequest(tabInfo: TabInfo): Observable<Request> {
    return this.store.pipe(
      select(fromRequest.getRequestForTabInfo(tabInfo)),
      takeUntil(this.componentDestroy()),
    );
  }

并在组件中使用：

private initializeComponent(): void {
        this.requestFacade.getRequest(this.tabInfo).pipe(
          takeUntil(this.componentDestroy()),
        ).subscribe(request => {
          console.log('request : ', request);
          this.request = request;
        });
        this.requestFacade.tabsContent$.pipe(
          takeUntil(this.componentDestroy()),
        ).subscribe(tab => {
          console.log('tab : ', tab);
        });
}

当组件被构建时，我得到两个日志，但是当我更新部分相关状态（我更新一个请求的内容）时，只出现tab 日志。

为什么过滤后的选择器 observable 没有做任何事情？

【问题讨论】：

因为您的输入参数（tabInfo）没有改变，所以它没有发出任何新值。在更新状态的相关部分后尝试更改输入参数并检查其是否正常工作。
当然，在更改选择器 (tabInfo) 的输入参数后，它会触发。但这不是它应该如何工作的，对状态的更改应该触发它。我的选择器不应该改变

标签： javascript angular typescript rxjs ngrx

【解决方案1】：

您在 getRequestForTabInfo 选择器中使用了一个静态参数，因此它假定它不会随着时间的推移而更改，这就是您没有收到更改的原因。

我建议不要传递参数，而是调度一个操作来设置商店中选定的 tabinfo 并使用选择器来检索它。你已经有 TabContents 了，所以应该能够重用你已经拥有的一些逻辑。

【讨论】：