Angular2 ngrx store multiple module app not writing to the store, but otherwise working

Question

I have an Angular2 app using Webpack and ngrx store which appears to be working, except for the state is not being maintained in the store (nothing is showing in the Chrome console under Application as being stored), it however throws no errors and the reducer returns the correct object for state. The only complication is the app uses two modules (lazy loaded) and Webpack, but otherwise its a store implementation in its simplest form.

App Config

..

"@ngrx/core": "^1.2.0",
"@ngrx/store": "^2.2.1",

..

app.component.ts

..
  import { Store }                      from '@ngrx/store';
  import { LoginService }                   from './login/login.service';

..

export class AppComponent
{
    constructor(public loginService: LoginService,
                public router: Router,
                public store: Store<any>) {}

app.module

..

import { BrowserModule }    from '@angular/platform-browser';
import { provideStore, StoreModule } from '@ngrx/store';
import { Access } from './login/access-reducer';

..

@NgModule({
bootstrap: [AppComponent],
  declarations: [
    AppComponent 
    ..
],
  imports: [ // import Angular's modules
    BrowserModule
,   routing
    ..
,   HttpModule
,   StoreModule.provideStore({access: Access}),
  ],
  providers: [
      appRoutingProviders,
      LoginService,
      ..
  ]
})

export class AppModule 
{
  constructor(public appRef: ApplicationRef) {}

access-reducer.ts

export const Access = (state = {}, action) => {

    switch (action.type){ 

        case 'LOGIN':
             state = action.payload;
             return state;

        case 'LOGOUT':
            state = action.payload;
            return state;

        default:
            return state;
    }
};

access-state.ts

export class AccessState{
    public access_token? = false; 
    public access_user? = "";

    ..
}

login.service.ts

import { Observable }               from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import { Action, provideStore, Store }   from '@ngrx/store';
import { AccessState}   from './access-state';
import { Access } from './access-reducer';

..

export const LOGIN = 'LOGIN';
export const LOGOUT = 'LOGOUT';

    @Injectable()
    export class LoginService implements OnInit
    {
        // store the URL so we can redirect after logging in
        public redirectUrl: string;
        accessState: AccessState = {};// access_token : true, access_user : 'access_user'};
        $access:  Observable<AccessState>;

        constructor(private http: Http, private router: Router, private logService: LogService, private store: Store<any>) { 
            this.$access = this.store.select('Access');
            this.$access.subscribe(access=>
                    this.accessState = access
            );
        }

...

login(username: string, password: string)

...

 return this.http.post(url, body, options)
                            .map((response: Response) => response.json())
                            .toPromise()
                            .then(c => {
                                this.accessState = { access_token : c, access_user : username};
                                this.store.dispatch(<Action>{type: LOGIN, payload: this.accessState });
                            })
                            .catch((err: any) => {
                                this.logService.log(err);
                                return Promise.reject(err);
                            });
        }

Obviously there is no actions file, however this I did have, but have tried to simplify it.

In the other module file I just simply import the store again

..
@NgModule({
  imports: [
    CommonModule
    ..
  , StoreModule.provideStore({access: Access}),

The thing is it runs through everything correctly, whilst throwing no errors, but does not write to the store. This app formally used local storage and worked well, but of course this doesn't work with Private Browsing. We do know of simpler solutions, but wanted to start to use the store.

Have I missed something... why does it work, but not write anything to indexDB?

Regards

Mark

Answer 1

It would appear the example has its own hidden module... https://github.com/ngrx/example-app/blob/master/src/app/db.ts