NGRx连续相同错误弹窗不触发：无需新增清除Action的方案咨询

这个问题的核心在于NGRx会跳过相同状态引用的更新通知——当两次错误的消息完全一致时，Reducer返回的状态和之前的状态引用相同（或者状态里的错误值是同一个基本类型，比如字符串），Store不会触发订阅者的更新，导致UI的弹窗逻辑没被触发。

在不新增清除错误Action的前提下，我们可以通过让每次错误状态都产生新的状态引用来解决，具体有两种可靠的实现方式：

方式1：给错误状态添加唯一标识（推荐） #

修改错误状态的结构，加入一个每次都不同的唯一值（比如时间戳或递增ID），这样即使错误消息相同，状态对象的引用也会变化，Store会通知订阅者。

步骤1：更新状态接口 #

把原来的单一错误字符串，改成包含消息和唯一标识的对象：

// 示例状态接口
interface AppState {
  // 其他状态...
  error: {
    message: string | null;
    timestamp: number | null; // 用时间戳做唯一标识
  };
}

步骤2：修改错误Action的载荷 #

在API调用失败分发Action时，带上当前时间戳：

// 假设你的错误Action定义
export const apiCallFailed = createAction(
  '[API] Call Failed',
  props<{ message: string; timestamp: number }>()
);

// 在API调用的catchError中分发Action
this.http.get('/api/data').pipe(
  // 处理成功逻辑...
  catchError((error) => {
    return of(apiCallFailed({
      message: error.message,
      timestamp: Date.now() // 每次错误都生成新的时间戳
    }));
  })
).subscribe();

步骤3：更新Reducer逻辑 #

Reducer中返回新的错误状态对象，确保每次都是新的引用：

const initialState: AppState = {
  // 初始状态...
  error: { message: null, timestamp: null }
};

export const appReducer = createReducer(
  initialState,
  on(apiCallFailed, (state, { message, timestamp }) => ({
    ...state,
    error: { message, timestamp } // 返回新对象，引用不同
  }))
);

步骤4：UI订阅状态变化 #

在UI组件中订阅错误状态，只要状态对象变化（哪怕消息相同），就触发弹窗：

// 组件中
this.errorState$ = this.store.select(state => state.error);

this.errorState$.subscribe(error => {
  if (error.message) {
    // 触发弹窗逻辑
    this.modalService.openErrorModal(error.message);
  }
});

方式2：包装错误消息为对象（简单版） #

如果不想加额外标识，也可以直接把错误消息包装成一个新对象，即使消息内容相同，每次返回的对象引用不同，Store也会触发更新：

修改状态和Reducer #

// 状态接口
interface AppState {
  error: { message: string | null } | null;
}

// Reducer处理
on(apiCallFailed, (state, { message }) => ({
  ...state,
  error: { message } // 每次都创建新对象
}));

这种方式的缺点是，如果你的UI订阅用了distinctUntilChanged之类的操作符过滤相同值，可能还是会跳过更新，所以方式1的唯一标识更稳妥。

内容的提问来源于stack exchange，提问作者Subashini