除非安装 Redux Devtools，否则 ngrx Angular 应用程序无法运行答案

【问题标题】：ngrx Angular app not working unless Redux Devtools is installed除非安装 Redux Devtools，否则 ngrx Angular 应用程序无法运行
【发布时间】：2019-01-27 12:01:12
【问题描述】：

我们的 ngrx Angular 应用程序运行良好，直到我们卸载 Redux Devtools 时出现错误：

您在预期流的位置提供了无效对象。您可以提供 Observable、Promise、Array 或 Iterable。

商店设置在 app.module.ts 中如下所示：

StoreModule.forRoot(reducers, {metaReducers}),
!environment.production ? StoreDevtoolsModule.instrument() : [],
EffectsModule.forRoot([SimsEffects, FiltersEffects, OmnipresentEffects, UserEffects, InitEffects]),
StoreRouterConnectingModule.forRoot({stateKey: 'router'})

我们的 ngrx reducers/index.ts 文件如下所示：

export interface AppState {
  router: any,
  omnipresent: OmnipresentState,
  user: UserState
}

export const reducers: ActionReducerMap<AppState> = {
  router: routerReducer,
  omnipresent: omnipresentReducer,
  user: userReducer
}

export function resetStore(reducer) {
  return (state, action) => {
    return reducer(action.type === InitActionTypes.ResetStore ? undefined : state, action)
  }
}

// storeFreeze throws an error early if state is mutated, avoiding hard to debug state mutation issues
export const metaReducers: MetaReducer<AppState>[] = !environment.production ? [resetStore, storeFreeze] : [resetStore] // tslint:disable-line array-type

任何人以前经历过这种情况或知道解决方法吗？该问题存在于开发和生产环境中。

我们正在运行 Node v8.11.3

编辑：如果我注释掉这一行，错误就会消失，但显然商店无法初始化：

@Effect()
init$: Observable<any> = defer(() => {
  return of(new InitAction())
})

其中 InitAction 只是一个不执行任何操作且不附加任何效果的操作（目的是帮助调试）。

【问题讨论】：

只是出于好奇，你是从哪里学会使用这样的效果的？对我来说，这种模式似乎完全不成立。据我所知，您总是必须导入Actions，然后使用ofType 方法来监听特定动作以确定要执行的效果。
听起来不错，但不适用于初始化效果 - 请参阅文档 - github.com/ngrx/platform/blob/master/docs/effects/…
我也有同样的问题，如果我不安装redux devtools，应用程序的行为是有线的......暂时无法弄清楚

标签： angular ngrx redux-devtools

【解决方案1】：

就我而言，问题是https://github.com/angular/angular/issues/25837

在没有安装 NGRX 开发工具的情况下，不知道为什么，某些部分的导航被认为是在 NgZone 之外（实际上是因为某些 Google SDK 回调调用）。如果 devtools 安装正确，则不会发生这种情况。

问题是控制台中没有出现错误，必须启用详细日志才能看到警告。通过包裹在 NgZone 中解决。运行调用：

constructor(private ngZone: NgZone) {}

this.ngZone.run(() => this.store.dispatch(buildAuthStartAction(user)));

【讨论】：

【解决方案2】：

改变这个解决了它：

import { defer, of } from 'rxjs/index' // as per my IDE suggestions

到：

import { defer, of } from 'rxjs' // as per ngrx docs

另外，将所有对“rxjs/index”的引用替换为“rxjs”

【讨论】：

很高兴您发现了问题，您的 IDE 提出了一个奇怪的建议。
是的，更奇怪的是它与 DevTools 一起工作！无论如何，看起来我可能不会被解雇；）