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

标签 angular rxjs ngrx ngrx-effects

这个问题是 this ongoing post 的延伸,但我觉得它的范围更窄,我也许能够独立于链接的帖子得到答案。

背景

在链接的帖子中,我试图轮询服务以获取数据(我的问题是打开和关闭轮询)。在我的现实世界应用程序中,调用实际上有点复杂。我想做的是一些可选的 http POSTs, and then a GET, always after my POSTS` 已返回(因此我知道服务器已处理 POST 数据,并将包含在我的下一个 GET 结果中。

如果我做 POST ,我还想分派(dispatch)一个操作,以便我可以更新我的状态,指示 POST 已发生。

我已经将一些可观察量转换为 promise ,因为我发现 async/await 比许多可观察量切换/映射等更容易理解 - 我知道这可能不是很纯粹,但也许有一天我的 rx/js运算符(operator)知识将会提高(我只能希望)。也许有人可以展示我更好的选择......(但这不是主要问题)

实际问题

我有以下代码效果代码,它不会调度自己的操作(这些将在 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导致更多的选择“触发”(因此更多的 UI 更新),如果我从效果中返回所有选择,这将首先在通过 selects 发生 UI 更新之前处理 reducer 中的所有操作。 ?

最佳答案

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

性能方面应该是相同的。

关于Angular NgRx - 在效果中使用 store.dispatch 是不好的做法吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58481903/

相关文章:

Angular 6 子路由不起作用

javascript - Angular 6 辅助路由

reactive-programming - RxJS - 如何将 toArray() 与异步 observables 数组一起使用?

angular - 如何使用 indexedDB 的 promise 在@ngrx/core 中设置initialState

Angular2 NGRX/商店 View 未更新

angular6 - Angular 6 ng lint select 已弃用

Angular 2 输入指令修改表单控件值

angular - 无法从Docker容器访问angular2应用

javascript - RxJS:带有数组的JSON数据,进一步处理流中的每个项目

node.js - RxJS5 TypeScript 打字失败