Search code examples
angularngrxredux-devtools

ngrx Angular app not working unless Redux Devtools is installed


Our ngrx Angular app works great until we uninstall Redux Devtools at which point we get errors:

You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

Store setup looks like this in app.module.ts:

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

and our ngrx reducers/index.ts file looks like this:

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

Anyone experienced this before or knows the fix? The issue exists both in dev and prod environments.

We are running Node v8.11.3

EDIT: If I comment out this line, the error goes away, but obviously the store fails to init:

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

Where InitAction is simply an action that does nothing with no effect attached (for the purpose of helping to debug this).


Solution

  • In my case the problem was https://github.com/angular/angular/issues/25837

    Without having the NGRX devtools installed, not sure why, the navigation in some part was considered to be outside the NgZone (which actually was because called by some Google SDK callback). If devtools where installed correctly this does not happened.

    The problem is that no error is raised in the console, had to enable verbose logs to see the warning. Solved by wrapping inside NgZone.run the call:

    constructor(private ngZone: NgZone) {}

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