Javascript Ngrx选择器未触发更新
我的国家是:Javascript Ngrx选择器未触发更新,javascript,angular,typescript,rxjs,ngrx,Javascript,Angular,Typescript,Rxjs,Ngrx,我的国家是: export interface RequestState { tabsContent: TabContent[]; } 其中,TabContent表示一组可视选项卡,每个选项卡包含一个请求和附加信息: export interface TabContent { tabInfo: TabInfo; request: Request; results?: any[]; } 我有一个专门的选择器,用于从单个选项卡内容获取一个请求: export const getR
export interface RequestState {
tabsContent: TabContent[];
}
其中,TabContent表示一组可视选项卡,每个选项卡包含一个请求和附加信息:
export interface TabContent {
tabInfo: TabInfo;
request: Request;
results?: any[];
}
我有一个专门的选择器,用于从单个选项卡内容获取一个请求:
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;
},
);
这是获取所有选项卡内容的基本方法:
export const getTabContent = createSelector(
getRequestFeatureState,
state => state.tabsContent,
);
基于此功能选择器:
const getRequestFeatureState = createFeatureSelector<RequestState>('requests');
当构建组件时,我会得到两个日志,但当我更新部分相关状态时,我只会更新一个请求的内容,只会显示选项卡日志
为什么过滤后的选择器不可观测?您在getRequestForTabInfo选择器中使用了一个静态参数,因此它假定它不会超时更改,这就是为什么您没有得到更改
我建议不要传入参数,而是分派一个操作来设置存储中选定的tabinfo,并使用选择器来检索它。存储中已经有TabContents,因此应该能够重用已有的一些逻辑。因为您的输入参数TabInfo没有更改,所以它不会发出任何新值。在更新状态的相关部分后尝试更改输入参数,并检查其是否工作。当然,在更改选择器tabInfo的输入参数后,它将触发。但这不是它应该如何工作的,状态的改变应该触发它。我的选择器不应该改变
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);
});
}