[英]Using NGRX in Router Guard
I'm using a CanActivate guard for one of my routes to ensure my NGRX store is initialized with the necessary data for my component.我正在为我的一条路线使用 CanActivate 保护,以确保使用组件的必要数据初始化我的 NGRX 存储。 I'm following the example in this post ( https://stackoverflow.com/a/48652379/1568482 ) and building up from that.我正在关注这篇文章中的示例( https://stackoverflow.com/a/48652379/1568482 )并以此为基础进行构建。
outputGrp$ = this.store.pipe(select(selectOutputGroup));
inputGrp$ = this.store.pipe(select(selectInputGroup));
-----------------------------------------
return <Observable<boolean>>this.store.select(selectGroupsLoaded).pipe(
map(loaded => {
if(!loaded)
this.store.dispatch(loadMainCanvas());
return loaded;
}),
filter(loaded => !!loaded),
take(1),
withLatestFrom(this.outputGrp$), //Get Output Group ID
tap(([loaded, og]) => this.outputGroupId = <string>og?.id),
filter(loaded => !!loaded),
take(1),
map((data) => data[0]),
withLatestFrom(this.inputGrp$), //Get Input Group ID
tap(([loaded, ig]) => this.inputGroupId = <string>ig?.id),
filter(([loaded, ig]) => !!loaded),
take(1),
//THIS NEVER GETS EVALUATED AGAIN AFTER STORE IS UPDATED FROM CALL BELOW!!!
withLatestFrom(this.store.select(selectInputGroupProcessorsLoaded)), //See if Input Group Processors Loaded
map(([l1, loaded]) => {
if(!loaded)
this.store.dispatch(loadProcessorsForGroup({groupId: this.inputGroupId, groupType: 'input'}));
return loaded;
}),
filter(loaded =>!!loaded),
take(1),
// GET: ERROR Error: Uncaught (in promise): EmptyError: no elements in sequence
}
In my store, I store boolean values for each thing I want to test to see if the data is loaded.在我的商店中,我存储了 boolean 值,用于我想测试的每件事,以查看数据是否已加载。 I'm evaluating those values here in the guard and if they aren't loaded, I dispatch a call to retrieve the data and update the store.我在警卫中评估这些值,如果它们没有加载,我会发送一个调用来检索数据并更新存储。
After the 'main canvas' item is loaded I progress and retrieve some necessary data for future calls here (groupIds).加载“主画布”项目后,我会继续并在此处检索一些必要的数据以供将来调用(groupIds)。 That data loads and I'm able to set variables with the necessary data.该数据加载,我能够使用必要的数据设置变量。
When I get to withLatestFrom(this.store.select(selectInputGroupProcessorsLoaded))
it evaluates to FALSE and falls into the map()
function.当我到达withLatestFrom(this.store.select(selectInputGroupProcessorsLoaded))
它评估为 FALSE 并落入map()
function。 In there the store dispatches a call to retrieve the data and the store is successfully updated, BUT... the selectInputGroupProcessorsLoaded
doesn't seem to change causing the statement to be re-evaluated.在那里,商店调度调用以检索数据并且商店成功更新,但是...... selectInputGroupProcessorsLoaded
似乎没有改变,导致重新评估语句。
I have a few more sections like this one and they all fail the same way.我还有几个像这样的部分,它们都以同样的方式失败。
So, switching out withLatestFrom
to switchMap
fixed my issue!因此,将withLatestFrom
切换为switchMap
解决了我的问题!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.