NgRx effect无法编译 网络状态Store实现报错排查

所有编译错误的根源是RxJS类型链不匹配：NgRx Effect要求内部操作符围绕Observable流编写，但你的服务方法返回的是async标记的Promise值，不存在.pipe()方法，TypeScript静态检查直接抛出类型错误，和是否触发action无关。

• NetworkStatusService.getNetworkStatus() 用async修饰，返回值为Promise<boolean>，但Effect中直接对返回值调用只有Observable才支持的.pipe()方法，是最直接的编译报错来源。
• 服务内部私自订阅在线/离线事件流、手动维护本地状态变量，既没有添加销毁时取消订阅的逻辑会造成内存泄漏，也破坏了RxJS的响应式流结构，无法支持后续状态变更推送。
• Effect调用持续输出值的事件流时没有截断逻辑，会导致每次网络状态变更都重复派发成功action，不符合单次fetch action的触发预期。
• Reducer未处理fetchNetworkStatusFail action，请求出错时Store中的error字段不会同步更新。

1. 重构NetworkStatusService #

移除async修饰，不要在服务内部手动订阅流，直接返回共享的Observable状态流，同时添加销毁逻辑防止内存泄漏：

import { Injectable, OnDestroy } from '@angular/core';
import { merge, fromEvent } from 'rxjs';
import { map, startWith, shareReplay } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class NetworkStatusService implements OnDestroy {
  private readonly networkStatus$ = merge(
    fromEvent(window, 'online'),
    fromEvent(window, 'offline')
  ).pipe(
    startWith(null),
    map(() => navigator.onLine),
    shareReplay(1)
  );

  // 持有订阅引用保证流持续运行，服务销毁时解绑事件
  private readonly statusSub = this.networkStatus$.subscribe();

  getNetworkStatus() {
    return this.networkStatus$;
  }

  ngOnDestroy(): void {
    this.statusSub.unsubscribe();
  }
}

2. 修正Effect逻辑 #

添加first()操作符取流的第一个最新值，保证单次fetch action只触发一次状态更新，修复类型匹配问题：

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { of } from 'rxjs';
import { map, mergeMap, catchError, first } from 'rxjs/operators';
import { NetworkStatusService } from './network-status.service';
import * as NetworkStatusActions from './network-status.actions';

@Injectable()
export class NetworkStatusEffects {
  constructor(
    private actions$: Actions,
    private networkStatusService: NetworkStatusService
  ) {}

  fetchNetworkStatus$ = createEffect(() =>
    this.actions$.pipe(
      ofType(NetworkStatusActions.fetchNetworkStatus),
      mergeMap(() =>
        this.networkStatusService.getNetworkStatus().pipe(
          first(),
          map((online: boolean) => NetworkStatusActions.fetchNetworkStatusSuccess({ online })),
          catchError(() => of(
            NetworkStatusActions.fetchNetworkStatusFail({
              errorMsg: 'Unable to fetch current network status'
            })
          ))
        )
      )
    )
  );
}

3. 补全Reducer逻辑 #

添加失败action的状态处理，成功时清空历史错误信息：

import { createReducer, on } from '@ngrx/store';
import * as NetworkStatusActions from './network-status.actions';

export interface NetworkStatusState {
  online: boolean;
  error: string;
}

export const initialState: NetworkStatusState = {
  online: true,
  error: ''
};

export const reducer = createReducer(
  initialState,
  on(NetworkStatusActions.fetchNetworkStatusSuccess, (state, { online }) => ({
    ...state,
    online,
    error: ''
  })),
  on(NetworkStatusActions.fetchNetworkStatusFail, (state, { errorMsg }) => ({
    ...state,
    error: errorMsg
  }))
);

扩展说明：如果需要网络状态切换时自动更新Store，不需要手动触发fetch action，可以移除Effect中的first()操作符，服务的流会在每次在线/离线事件触发时自动推送状态，驱动Store更新。

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