在NGRX Effect中调用API后使用Selector获取Store数据的咨询

我懂你的困扰啦——你想在API请求完成后，从Store里拿数据来处理返回结果，之前误以为withLatestFrom只能放在管道最开头，其实它完全可以用在任何你需要获取Store状态的位置！

核心解决方案 #

在API请求返回的流之后，插入withLatestFrom来获取Store的最新数据，这样就能在后续的处理逻辑中同时拿到API响应和Store数据了。

修改后的代码示例 #

sendTestStop = createEffect(() => {
 return this.actions$.pipe(
  ofType('[API] do it'),
  switchMap(() => this.RestApiService.DoCommand()),
  // 在这里加入withLatestFrom，获取Store中你需要的数据
  withLatestFrom(this.store.select(selectYourTargetData)), // 替换成你实际的Store选择器
  switchMap( ([apiResponse, storeData]) => { // 解构出API响应和Store数据
   let response = [];
   for (const test of apiResponse.ResponseArray) {
    // 现在可以直接使用storeData啦！
    if(test.IsStopped){
     response.push(this.viewActions.action({logString: "logmsg"}));
     response.push(this.activeTestActions.action2({test: test}));
    } else{
     response.push(this.viewActions.addLogEntry({logString: "logmsg"}));
    }
   }
   return response;
  }),
 )
});

关键说明 #

• withLatestFrom的作用是将当前流的值（这里是API返回的TestStopResponse）与指定Store选择器的最新值组合成一个数组，所以后续操作可以同时拿到两者。
• 记得把selectYourTargetData替换成你自己定义的NgRx选择器，用来精准获取Store中你需要的那部分数据。
• 如果需要确保Store数据已经加载完成（避免初始空值影响逻辑），可以在withLatestFrom后加一个过滤逻辑：

  withLatestFrom(this.store.select(selectYourTargetData)),
  filter(([_, storeData]) => !!storeData), // 确保storeData存在再继续执行
  

内容的提问来源于stack exchange，提问作者Thoker