Observable emits data only once

[naivefun]

In the component the selector is like this:

    @select((state: IAppState) => {
        console.log('received selector', state);
        return state.solutionState.solutions;
    })
    public solutions$: Observable<Pageable<Solution>>;

The first epic will trigger the solutions$ to emit data, however if I click other pages and click back again the observable never emits data again. The log is like this:

The received selector log shows the behavior.

The reducer method should be alright (modified to force new object purposely):

        case SolutionActions.LOAD_SOLUTIONS_SUCCESS:
            return _.cloneDeep(mergeState(state, {
                solutions: _.cloneDeep(action.payload),
                loadingSolutions: false,
                date: Date.now()
            }));

I also tried to subscribe manually but no luck.

is it something to do with multi modules? any thoughts?

[naivefun]

I notice that my 3 modules [app, dashboard, solution] (lazy loaded) all import StoreModule, which is created 3 times. I guess the reason is they all have individual store? How can I share the same store instance in this case?

I tried but failed with:

export class StoreModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: StoreModule,
            providers: [
                StoreService,
                AppStore,
                {
                    provide: NgRedux,
                    useExisting: AppStore,
                },
            ],
        };
    }
}

And by extending RootState I confirm that the state is updated but RootState.dispatch is not called.

[tomacf]

If you have a main module on the top of your infrastructure, maybe importing the store only there would solve your issue

[e-schultz]

You should only register NgRedux at the root AppModule level - when you specify it as a provider in a lazy loaded module - it will get it's own injector / instances, and since NgRedux relies on a static singleton internally so features like @select work - I could see this causing some weird behaviour.

The angular.io docs mention that providers that are registered at the root AppModule level will be available application wide.

Lazy-loaded modules and their components can inject AppModule services; they can't inject AppComponent services.

[naivefun]

I actually tried not to import on lazy-loaded modules but the error is like this

Error: Dispatch failed: did you forget to configure your store? 
https://github.com/angular-redux/@angular-redux/core/blob/master/README.md#quick-start

The error is from

  dispatch: Dispatch<RootState> = (action: Action) => {
    assert(
      !!this._store,
      'Dispatch failed: did you forget to configure your store? ' +
      'https://github.com/angular-redux/@angular-redux/core/blob/master/' +
      'README.md#quick-start');

    if (!NgZone.isInAngularZone()) {
      return this.ngZone.run(() => this._store.dispatch(action));
    } else {
      return this._store.dispatch(action);
    }
  };

In the sub-modules, the this._store is null, not injected from root providers.

[gregkopp]

Do you have a github repo or a plunker to show your example? I'm involved in a couple multi module projects using the store and this is not an issue. I think it might be in your code or how your sub modules are set up. I am happy to lend a hand if you are willing and able to share a concrete example.

[naivefun]

@gregkopp thanks a lot. However I end up with using ngrx/store so. Maybe I can reproduce it when I have more time.