ngrx效果不编译

Question

我创建了一个NetworkStatus NGRX商店/状态，以及一个检查应用程序是否在线的服务。我还需要NGRX效果，该效应采用FetchNetworkStatus操作，并使用该服务用布尔来更新商店。但是，即使在使用该操作之前，我似乎只是无法正确处理，并且有很多错误。所有错误都与效果有关，因此我必须在那里做错了很多事情。我正在努力理解所有效果方法。

这是我在终端中遇到的错误：

这是我的效果的代码：

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

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

这是服务：

@Injectable({
  providedIn: 'root'
})
export class NetworkStatusService {
  networkStatus = false;
  networkStatus$: Subscription = Subscription.EMPTY;

  async getNetworkStatus() {
        this.networkStatus = navigator.onLine;
    this.networkStatus$ = merge(
      of(null),
      fromEvent(window, 'online'),
      fromEvent(window, 'offline')
    )
      .pipe(map(() => navigator.onLine))
      .subscribe(status => {
        this.networkStatus = status;
      });
      return this.networkStatus;
  }
}

以及动作：

export const fetchNetworkStatus = createAction('[NetworkStatus] Fetch networkStatus');
export const fetchNetworkStatusSuccess = createAction('[NetworkStatus] Fetch networkStatus status success', props<{online: boolean}>());
export const fetchNetworkStatusFail = createAction('[NetworkStatus] Fetch networkStatus status fail', props<{errorMsg: string}>());

和还原器：

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: online
  }))
);

我在这里做错了什么？该服务只是返回布尔值，所以我认为这不是太复杂了，我认为我只是不明白。

Answer 1

您还必须从地图

NetworkStatusActions.fetchNetworkStatusSuccess({
  online: networkStatus,
}).   

和Catherror中返回动作

return of(
  NetworkStatusActions.fetchNetworkStatusFail({
     errorMsg: 'Unable to fetch current incident',
  })
)