除非安装了 Redux Devtools,否则 ngrx Angular 应用程序无法运行

ngrx Angular app not working unless Redux Devtools is installed

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

You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or 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 只是一个不执行任何操作且不附加任何效果的操作(为了帮助调试)。

改变这个解决了它:

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

至:

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

此外,将所有对 'rxjs/index' 的引用替换为 'rxjs'

在我的例子中,问题是 https://github.com/angular/angular/issues/25837

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

问题是控制台中没有出现错误,必须启用详细日志才能看到警告。 通过在调用 NgZone.run 中包装解决:

constructor(private ngZone: NgZone) {}

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