javascript - Ngrx 选择器未触发更新
问题描述
我的状态是:
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 没有做任何事情?
解决方案
您在 getRequestForTabInfo 选择器中使用了一个静态参数,因此它假定它不会超时更改,这就是您没有得到更改的原因。
我建议不要传入参数,而是调度一个操作来设置商店中选定的 tabinfo 并使用选择器来检索它。您已经有 TabContents 在存储中,因此应该能够重用您已经拥有的一些逻辑。
推荐阅读
- docker - 如何将在 Docker 容器中运行的 Grafana 连接到在主机上运行的 Prometheus 数据源(在 Docker for Mac 上)?
- c++ - 接受整数输入并返回字符串的函数
- node.js - 关于如何编写一个简单的 JHipster 模块的教程
- android - 广播接收器没有收到消息
- vb.net - 发送 SMS 的应用程序的问题
- ecmascript-6 - 为什么 ES6 模块可以摇树
- python - 如何使用 BigQuery 和 Apache Beam 将 SQL 表转换为行序列列表?
- javascript - 如何在组件 vuejs 中显示 firebase 子集合
- python-3.x - python字典 - 合并两个字典并在它们匹配时附加键值
- python - Cython 代码在运行后返回不正确的结果数据类型