如何从Reducer/Action触发API重新加载？复杂应用场景优化问询

这是一个非常典型的实时数据同步场景，用 NgRx 处理时，核心要遵循action 驱动副作用和单一职责的原则，你当前的实现已经有了方向，但可以进一步解耦逻辑，让代码更可维护。我来分享几个更优雅的处理思路：

1. 重构 Action 体系，明确触发信号 #

首先，我们需要把模糊的状态触发，转化为明确的 Action 事件，避免直接依赖状态订阅：

export enum MatchActionTypes {
  // 初始加载/主动重载
  LoadMatches = '[Match] Load Matches',
  LoadMatchesSuccess = '[Match] Load Matches Success',
  LoadMatchesFailure = '[Match] Load Matches Failure',
  // WebSocket 推送更新
  UpdateMatch = '[Match] WebSocket Update Match',
  // 标记需要重载
  MarkNeedReload = '[Match] Mark Need Reload',
  // 应用初始化触发
  InitMatches = '[App] Init Matches',
}

// 对应 Action 类示例
export class MarkNeedReload implements Action {
  readonly type = MatchActionTypes.MarkNeedReload;
}

export class LoadMatches implements Action {
  readonly type = MatchActionTypes.LoadMatches;
}

2. 拆分 Effect，单一职责更清晰 #

把原来混合的逻辑拆分为两个独立的 Effect，分别处理 WebSocket 更新判断和数据加载：

处理 WebSocket 更新的 Effect #

这个 Effect 只负责检查推送的对象是否存在，不存在则标记需要重载：

@Effect()
handleWebSocketUpdate$: Observable<Action> = this.actions$.pipe(
  ofType(MatchActionTypes.UpdateMatch),
  withLatestFrom(this.store.select(getAll)), // 用你已有的 getAll 选择器获取本地列表
  map(([action, localMatches]) => {
    const incomingMatch = action.payload;
    // 检查本地是否存在该对象
    const matchExists = localMatches.some(m => m.id === incomingMatch.id);
    
    if (!matchExists) {
      // 标记需要重载
      return new MarkNeedReload();
    }
    // 如果存在，直接更新本地状态
    return new UpdateMatchSuccess(incomingMatch); // 需定义对应的成功更新 Action
  }),
);

处理数据加载的 Effect #

这个 Effect 只负责响应“需要重载”或“初始加载”的信号，执行 HTTP 请求：

@Effect()
loadMatchesOnDemand$: Observable<Action> = this.actions$.pipe(
  // 监听初始初始化和标记重载的 Action
  ofType(MatchActionTypes.InitMatches, MatchActionTypes.MarkNeedReload),
  withLatestFrom(this.store.select(isLoading)), // 用你已有的 isLoading 选择器
  filter(([, isLoading]) => !isLoading), // 避免正在加载时重复触发
  switchMap(() => {
    // 执行你的 HTTP 请求逻辑
    return forkJoin([
      this.matchService.getMatches(),
      // 其他必要的请求...
    ]).pipe(
      map(([matches, otherData]) => 
        new LoadMatchesSuccess({ matches, otherData })
      ),
      catchError(error => 
        of(new LoadMatchesFailure(error))
      ),
    );
  }),
);

3. 完善 Reducer 逻辑，管理状态流转 #

确保 Reducer 正确处理上述 Action，维护 loading、needReload 和 matches 的状态：

export function matchReducer(
  state = initialState,
  action: MatchActions
): IMatchStore {
  switch (action.type) {
    case MatchActionTypes.LoadMatches:
      return { ...state, loading: true };
    case MatchActionTypes.LoadMatchesSuccess:
      return {
        ...state,
        loading: false,
        needReload: false,
        matches: action.payload.matches,
      };
    case MatchActionTypes.LoadMatchesFailure:
      return { ...state, loading: false };
    case MatchActionTypes.MarkNeedReload:
      return { ...state, needReload: true };
    // 处理其他 Action...
    default:
      return state;
  }
}

4. 额外优化点 #

• 避免频繁重载：如果短时间内收到多个未知对象，可以在 MarkNeedReload 的触发逻辑中加入 debounceTime(300)，避免频繁发起全量请求。
• 可选：单对象加载替代全量重载：如果业务允许，当发现未知对象时，不要直接全量重载，而是发起单个对象的 HTTP 请求，再更新本地状态，这样性能更优：

  // 替换 MarkNeedReload 为 FetchSingleMatch
  return new FetchSingleMatch(incomingMatch.id);
  

• 移除直接状态订阅：原来的 this.store.select(reload).subscribe() 可以完全移除，所有副作用都由 Effect 处理，避免内存泄漏和不符合 NgRx 数据流规范。

这样调整后，你的代码逻辑会更清晰，每个部分只负责单一职责，也更符合 NgRx 的最佳实践。

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