Ngrx dispatch 序列调用：理解其执行机制与循环规避策略

Ngrx dispatch 的执行机制与同步性

在ngrx状态管理中，store.dispatch() 方法是触发状态变更的核心机制。它接收一个 action 对象作为参数，并将该 action 派发给所有注册的 reducer。关于 dispatch 的同步性，需要明确以下两点：

1. Action 派发到 Reducer 的过程是同步的：当您调用 this.store.dispatch(action) 时，该 Action 会立即被发送到相应的 Reducer 函数。Reducer 会同步地处理这个 Action，并返回一个新的状态对象。
2. 状态更新后的订阅者通知是异步的：尽管 Reducer 同步更新了状态，但 store.select() 订阅者接收到新状态的通知通常是异步的（通过 RxJS 的调度器）。这意味着，在一个 dispatch 调用之后，紧接着的下一行代码会立即执行，而 store.select 的回调函数则会在稍后的微任务队列或宏任务队列中执行。

考虑以下代码片段：

this.store.dispatch('Action1'); // 假设是 Action1
this.store.dispatch('Action2'); // 假设是 Action2
this.router.navigation(['/confirm-region'],{relativeTo: this.route.parent });

在这个序列中，Action1 会首先被派发，Reducer 处理并返回新状态。然后，Action2 紧接着被派发，Reducer 再次处理。最后，this.router.navigation 会立即执行，而不会等待任何 dispatch 引起的 store.select 订阅回调完成。这意味着，router.navigation 语句会毫无疑问地被调用。

store.select 订阅中的 dispatch 链式调用风险

将 dispatch 调用放在 store.select 的订阅回调中，尤其是在这些 Action 会影响到被订阅的状态时，会引入潜在的无限循环风险。

万知

万知: 你的个人AI工作站

下载

考虑以下组件代码：

import { Subscription } from 'rxjs';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Store } from '@ngrx/store';
import { Router, ActivatedRoute } from '@angular/router'; // 假设已注入 Router, ActivatedRoute
import { createAction } from '@ngrx/store';

// 定义示例 Action
export const Action1 = createAction('[Region] Action 1 Triggered');
export const Action2 = createAction('[Region] Action 2 Triggered');
export const confirmRegionRequested = createAction('[Region] Confirm Region Requested');

interface CountriesState {
  region: string;
  Status: boolean;
}

interface TestState {
  countriesState: CountriesState;
}

@Component({
  selector: 'app-region',
  template: ``
})
export class RegionComponent implements OnInit, OnDestroy {
  storeSubscriptions: Subscription[] = [];
  region: string; // 用于存储 state.region

  constructor(
    private store: Store,
    private router: Router,
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    this.storeSubscriptions.push(