5

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).

danday74
  • 52,471
  • 49
  • 232
  • 283
  • 1
    Just out of curiousity, where did you learn to use effects like that? To me this pattern seems completely off. As far as I know you always have to import `Actions` and then use the `ofType` method to listen to particular actions to determine the to be executed effect. – enf0rcer Aug 21 '18 at 12:06
  • that sounds right, but not for the init effect - see docs - https://github.com/ngrx/platform/blob/master/docs/effects/api.md#initializing-effect – danday74 Aug 21 '18 at 12:49
  • I have the same problem, if I do not install redux devtools, the apps behaves wired... Cannot figure out yet – albanx Mar 10 '19 at 11:14

2 Answers2

2

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)));

albanx
  • 6,193
  • 9
  • 67
  • 97
1

Changing this solved it:

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

to:

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

Also, replaced all references to 'rxjs/index' with 'rxjs'

danday74
  • 52,471
  • 49
  • 232
  • 283