Angular2 ngrx 存储多个模块应用程序不写入商店,但在其他方面工作

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

我有一个使用 Webpack 和 ngrx 商店的 Angular2 应用程序,它似乎可以正常工作,除了商店中没有维护状态(Chrome 控制台中的应用程序下没有任何内容显示为正在存储) ,但是它不会抛出任何错误,并且 reducer returns 是状态的正确对象。唯一的麻烦是该应用程序使用两个模块(延迟加载)和 Webpack,但除此之外它是最简单形式的商店实现。

应用配置

..

"@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) {}

访问-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;
    }
};

访问-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);
                            });
        }

显然没有动作文件,但是我确实有,但已尝试简化它。

在另一个模块文件中,我只是简单地再次导入商店

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

问题是它正确地运行了所有内容,同时没有抛出任何错误,但不写入存储。这个应用程序正式使用本地存储并且运行良好,但是当然这不适用于隐私浏览。我们确实知道更简单的解决方案,但想开始使用商店。

我是不是漏掉了什么...为什么它可以工作,但没有向 indexDB 写入任何内容?

此致

马克

看起来这个例子有它自己的隐藏模块... https://github.com/ngrx/example-app/blob/master/src/app/db.ts