NgRx 状态管理：深入解析 dispatch 序列、避免无限循环与最佳实践

// regioncomponent.ts
import { Subscription } from 'rxjs'; // 修正rxjs/Subscription
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Store } from '@ngrx/store';
import { Router, ActivatedRoute } from '@angular/router'; // 引入 Router 和 ActivatedRoute
import { TestState } from './ReducerList'; // 假设路径正确

@Component({
  selector: 'app-region',
  template: `<!-- Your template here -->`,
})
export class RegionComponent implements OnInit, OnDestroy {
  storeSubscriptions: Subscription[] = [];
  region: any; // 根据实际状态定义类型

  constructor(
    private store: Store<TestState>,
    private router: Router, // 注入 Router
    private route: ActivatedRoute // 注入 ActivatedRoute
  ) {}

  ngOnInit() {
    this.storeSubscriptions.push(
      this.store.select(locationState => locationState.countriesState).subscribe(state => {
        this.region = state.region;

        if (state.Status === true) {
          // 这里是问题的核心：在订阅回调中 dispatch
          this.store.dispatch({ type: 'Action1' }); // 使用对象字面量作为 Action
          this.store.dispatch({ type: 'Action2' }); // 使用对象字面量作为 Action
          this.router.navigate(['/confirm-region'], { relativeTo: this.route.parent });
        }
      })
    );
  }

  ngOnDestroy() {
    this.storeSubscriptions.forEach(sub => sub.unsubscribe());
  }
}

// ReducerList.ts (示例)
import { ActionReducerMap, Action } from '@ngrx/store';

export interface CountriesState {
  region: string;
  Status: boolean;
  // ... 其他属性
}

export interface TestState {
  countriesState: CountriesState;
}

// 假设 countriesStateReducer 已经定义
export function countriesStateReducer(state: CountriesState | undefined, action: Action): CountriesState {
  if (state === undefined) {
    return { region: '', Status: false }; // 初始状态
  }
  switch (action.type) {
    case 'Action1':
      // 假设 Action1 会改变 countriesState
      return { ...state, Status: true, region: 'Updated Region by Action1' };
    case 'Action2':
      // 假设 Action2 也会改变 countriesState
      return { ...state, Status: true, region: 'Updated Region by Action2' };
    default:
      return state;
  }
}

export const reducers: ActionReducerMap<TestState> = {
  countriesState: countriesStateReducer,
};

// regioncomponent.ts (ngOnDestroy 部分)
import { Subscription } from 'rxjs';
import { Component, OnInit, OnDestroy } from '@angular/core';
// ... 其他导入

@Component({ /* ... */ })
export class RegionComponent implements OnInit, OnDestroy {
  storeSubscriptions: Subscription[] = [];
  // ... 其他属性和构造函数

  ngOnInit() {
    this.storeSubscriptions.push(
      this.store.select(locationState => locationState.countriesState).subscribe(state => {
        // ... dispatch 逻辑
      })
    );
  }

  ngOnDestroy() {
    // 组件销毁时，取消所有订阅，防止内存泄漏和潜在的无限循环
    this.storeSubscriptions.forEach(sub => sub.unsubscribe());
  }
}

// actions.ts
import { createAction } from '@ngrx/store';

export const triggerRegionProcessing = createAction('[Region Component] Trigger Region Processing', (payload: { regionStatus: boolean }) => payload);
export const processRegionAction1 = createAction('[Region Effect] Process Region Action 1');
export const processRegionAction2 = createAction('[Region Effect] Process Region Action 2');
export const regionProcessingComplete = createAction('[Region Effect] Region Processing Complete');

// region.effects.ts
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { of } from 'rxjs';
import { map, concatMap } from 'rxjs/operators';
import * as RegionActions from './actions';
import { Router } from '@angular/router'; // 引入 Router
import { ActivatedRoute } from '@angular/router'; // 引入 ActivatedRoute

@Injectable()
export class RegionEffects {
  constructor(
    private actions$: Actions,
    private router: Router,
    private route: ActivatedRoute
  ) {}

  processRegion$ = createEffect(() =>
    this.actions$.pipe(
      ofType(RegionActions.triggerRegionProcessing),
      concatMap(action => {
        if (action.payload.regionStatus === true) {
          // 顺序 dispatch 两个 Action
          return of(RegionActions.processRegionAction1(), RegionActions.processRegionAction2()).pipe(
            map(() => {
              // 导航到新路由，并发出一个完成 Action
              this.router.navigate(['/confirm-region'], { relativeTo: this.route.parent });
              return RegionActions.regionProcessingComplete();
            })
          );
        }
        return of(RegionActions.regionProcessingComplete()); // 如果条件不满足，直接完成
      })
    )
  );
}