Question

我有一个使用Webpack和ngrx商店的Angular2应用程序似乎正在运行，除了状态未在商店中维护（在应用程序中存储的Chrome控制台中没有任何内容显示），但它不会抛出任何错误reducer返回正确的状态对象。唯一的复杂因素是应用程序使用两个模块（延迟加载）和Webpack，但另外它是一个最简单形式的商店实现。

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

使用-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写任何内容？

此致

马克

Answer 1

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

Angular2 ngrx存储多个模块应用程序不写入商店，但以其他方式工作

1 个答案: