Angular NgRx - 在效果中使用 store.dispatch 是不好的做法吗？

Question

这个问题是的扩展，但我觉得它的范围更窄，我可能能够独立于链接的 post.

获得答案

背景

在链接 post 中，我正在尝试轮询服务以获取数据（我的问题是打开和关闭轮询）。在我真实世界的应用程序中，调用实际上有点复杂。我想要做的是一些可选的 http POSTs, and then a GET, always after myPOSTS` 已经返回（所以我知道服务器已经处理了 POSTed 数据，并将包含在我的下一个 GET 结果中。

如果我执行 POST，我还想分派一个动作，这样我就可以更新我的状态，指示 POST 已经发生。

我已经将一些 observables 转换为 promises，因为我发现 async/await 比许多 observables switch/mapping 等更容易理解 - 我知道这可能不是很纯粹，但也许是一个有一天我的 rx/js 操作员知识会有所提高（我只能希望）。也许有人可以展示我更好的选择...（但这不是主要问题）

实际问题

我有以下代码效果代码，它不会调度自己的操作（这些将在this.syncData中完成）....

    public startPolling$ = createEffect(() => this.actions$.pipe(
        ofType(myActions.startPolling),    
        tap(_ => this.logger.info('effect start polling')),
        tap(() => this.isPollingActive = true),
        switchMap(_ => this.syncData())
      ), { dispatch: false });

然后辅助方法是...

    private syncData(): Observable<Action> {        
        const result$: Observable<Action> = Observable.create(async subscriber => {
          try {             
            const pendingEdits = await this.store$.select(fromData.getPendingEditedData).pipe(take(1)).toPromise()
            const pendingNewData = await this.store$.select(fromData.getNewData).pipe(take(1)).toPromise();

            // First post any local updates. These both block, so once they finish we can get the server data knowing any posted
            // data will be included
            if (pendingEdits.length > 0) {
              await this.dataService.postPendinEdits(pendingEdits).toPromise();
              this.store$.dispatch(myActions.editSuccess());
            }

            if (pendingNewData.length > 0) {
              await this.dataService.postPendingNewData(pendingNewData).toPromise();
              this.store$.dispatch(myActions.addNewDataSuccess());
            }

            const dataResult$ = this.dataService.getAllData().pipe(          
              tap(data => {
                this.previousResultsTimeUtc = data.previousResultsTimeUtc;
                if (data.currentDay) {
                  this.store$.dispatch(myActions.getCurrentDaySuccess(data.currentDay));
                  this.store$.dispatch(myActions.getDataSuccess(data));               
                } else {              
                  this.store$.dispatch((myActions.getDataSuccess(data));               
                }
              }),          
              catchError(err => of(myActions.getDataFail(err)))
            );
            const subs2 = dataResult$.subscribe(ss => {
              subs2.unsubscribe();
              subscriber.next(ss);
            });        
          } catch (error) {
            subscriber.error(error);
          }      
        })

        return result$;
      }

所以，我们可以在辅助方法中看到，我得到了一些存储状态，以及 调度操作 。另外，在我的应用程序中，我有另一个 continuePolling 效果，我也想在 syncData().

中调用相同的代码

主要问题是，使用 this.store$.dispatch 分派这些动作而不是仅从效果中返回多个动作是个坏主意吗？

使用 this.store$.dispatch 是否会导致更多选择 "fire"（因此更多 UI 更新）如果我从效果中返回它们，这将首先处理所有操作在 UI 更新之前的减速器中通过 selects?

Answer 1

就个人而言，我不希望 syncData 调度操作。我宁愿看到它 return 一个动作，让 ngrx/effects 处理动作的调度。

性能方面应该是一样的。

Angular NgRx - 在效果中使用 store.dispatch 是不好的做法吗？

Angular NgRx - is it bad practice to use store.dispatch in an effect?

rxjs

ngrx

ngrx-effects

angular