在 init hook 中选择存储切片时如何解决这个无限循环？

Question

实例化组件时，我需要用一系列道具来派遣一项动作，这些操作将通过又会获取数据的效果来处理。此操作后，我需要更新状态并保存此搜索的标准。我理解的最后一件事会导致无尽的循环

更新0

我找到了这个问题如何访问以前的状态和当前状态并在您订阅ngrx中的商店时进行比较吗？，建议使用为了仅派遣组件实例化的操作，我使用distionuntilChanged。在更改startDate或endDate的值时，我希望它执行，但这不会发生，它根本不会执行。有什么想法吗？

this.store
  .pipe(
    select('dashboard'),
    distinctUntilChanged(
      (prev, curr) =>
        prev.startDate === curr.startDate || prev.endDate === curr.endDate
    )
  )
  .subscribe({
    next: (state) => {
      this.startDate = state.startDate;
      this.endDate = state.endDate;
      // ...


      this.store.dispatch(
        filter({
          startDate: this.startDate,
          endDate: this.endDate
        })
      );
    },
  });

组件类

ngOnInit(): void {
  this.store.select('dashboard').subscribe({
    next: (state) => {
      this.startDate = state.startDate;
      this.endDate = state.endDate;
      // ...

      this.store.dispatch(
        filter({
          startDate: this.startDate,
          endDate: this.endDate,
        })
      );
    },
  });
}

诉讼

export const filter = createAction(
  '[Dashboard component] Apply filter',
  props<{
    startDate: Date;
    endDate: Date;
  }>()
);

效果看起来与此

filter$ = createEffect(() =>
  this.actions$.pipe(
    ofType(filter),
    switchMap((action) => {
      const obs0$ = new Observable((observer: Observer<any>) => {
        // ...
      });

      const obs1$ = new Observable((observer: Observer<any>) => {
        // ...
      });

      const obs2$ = new Observable((observer: Observer<any>) => {
        // ...
      });

      const obs3$ = new Observable((observer: Observer<any>) => {
          // ...
        }
      );

      const obs4$ = new Observable((observer: Observer<any>) => {
        // ...
      });

      const obs5$ = new Observable((observer: Observer<any>) => {
        // ...
      });

      return forkJoin<readonly SourceModel[] | readonly RankingModel[]>([
        obs1$,
        obs2$,
        obs3$,
        obs4$,
        obs5$,
        obs6$,
      ]).pipe(map((response) => filterSuccess({ payload: response })));
    })
  )
);

还原器看起来相似，

// ...

export interface AdminState {
  startDate: Date;
  endDate: Date;
}

export const initialState: AdminState = {
  startDate: new Date(),
  endDate: getDashboardFilterDefaultEndDate(),
};

export const adminReducer = createReducer(
  initialState,
  on(filter, (state, { startDate, endDate }) => ({
    ...state,
    startDate,
    endDate,
  })),
  on(filterSuccess, (state, { payload }) => ({
    ...state,
    // ...
  }))
);

我知道该行为是由于数据收集完成并且在还原器中更新搜索标准时，在组件开始时选择了select triggers a新搜索。如果是这样，我该如何处理？

感谢您的建议

Answer 1

我认为您必须改变消耗状态的方式。

您必须创建仅在实际更改值时才触发的选择器，如果这样做，则不必使用distionuntilChanged运算符。