store dispatch 多次调用效果的http get

Question

在调度期间，我的效果被反复调用，直到我的后端响应并加载数据。我需要帮助来了解如何仅使用一个 GET REQUEST 加载数据，然后在数据实际已经存在的情况下从存储中加载。

      this.cases$ = this.store
          .pipe(
            takeWhileAlive(this),
            select(selectImportTaskCasesData),
            tap(
              (cases) => {
                if (cases.length <= 0) {
                  this.store.dispatch(new ImportTaskLoadCasesAction());
                }
              }),
            filter((cases) => {
              return cases.length > 0;
            }),
            tap(() => {
              this.store.dispatch(new ImportTaskLoadCasesLoadedFromStoreAction());
            }),
            shareReplay()
          );

export const selectCasesData = createSelector(
  selectImportTaskCasesState,
  state => state ? state.cases : []
);

export const selectImportTaskCasesData = createSelector(
  selectCasesData,
  cases => {
    return cases.slice(0);
  }
);


 @Effect()
  ImportCasesLoad$: Observable<any> = this.actions$
    .pipe(
      ofType<ImportTaskLoadCasesAction>(ImportCasesActionTypes.ImportTaskLoadCasesAction),
      map((action: ImportTaskLoadCasesAction) => action),
      switchMap((payload) => {
        return this.importCases.get()
          .pipe(
            map(response => {
              return new ImportTaskLoadCasesSuccessAction({ total: response['count'], cases: response['results'] });
            }),
            catchError((error) => {
              this.logger.error(error);
              return of(new ImportTaskLoadCasesLoadErrorAction(error));
            })
          );
      })
    );

Answer 1

是的，我有一个 reducer 可以像这样处理我的成功操作：

    case ImportCasesActionTypes.ImportTaskLoadCasesSuccessAction:
  return {
    ...state,
    loading: false,
    cases: action.payload.cases,
    total: action.payload.total
  };

它在我的效果中被调用。

Answer 2

下面的工作吗？这是假设您有一个处理 ImportTaskLoadCasesSuccessAction 的减速器；也许提供一个工作示例会有所帮助，因为对于如何管理状态存在一些猜测。

   this.cases$ = this.store
      .pipe(
        takeWhileAlive(this),
        select(selectImportTaskCasesData),
        tap(
          (cases) => {
            if (cases.length <= 0) {
              this.store.dispatch(new ImportTaskLoadCasesAction());
            }
          }),
        // personally, I would have the component/obj that is consuming this.cases$ null check the cases$, removed for brevity
        shareReplay()
      );

  export const selectCasesData = createSelector(
    selectImportTaskCasesState,
    state => state ? state.cases : []
  );

  export const selectImportTaskCasesData = createSelector(
    selectCasesData,
    cases => {
      return cases.slice(0);
    }
  );


 @Effect()
  ImportCasesLoad$: Observable<any> = this.actions$
    .pipe(
      ofType<ImportTaskLoadCasesAction>(ImportCasesActionTypes.ImportTaskLoadCasesAction),
      mergeMap(() => this.importCases.get()
          .pipe(
            map(response => {
              return new ImportTaskLoadCasesSuccessAction({
                total: response['count'],
                cases: response['results']
              });
            }),
            // catch error code removed for brevity
          );
      )
    );

如果您只希望调用this.importCases.get() 触发一次，我建议将动作调度移出.pipe(tap(...))。因为每次订阅都会触发。

相反，将 this.cases$ 设置为始终返回 select(selectImportTaskCasesData), 的结果。从功能上讲，您可能希望它始终返回一个数组。但这取决于您设计的愿望。 敌人的例子......

this.cases$ = this.store
  .pipe(
    takeWhileAlive(this),
    select(selectImportTaskCasesData),
  );

另外，就像在构造函数中一样，您可以分派this.store.dispatch(new ImportTaskLoadCasesAction());。如果你希望它只在 case$ 为空时被调用，你总是可以将它包装在一个方法中。

例如

export class exampleService() {
  ensureCases(): void {
    this.store.pipe(
      select(selectImportTaskCasesData), 
      take(1)
    ).subscribe(_cases => {
      if (_cases && _cases.length < 1 ) {
        this.store.dispatch(new ImportTaskLoadCasesAction());
      }
    }),
  }
}