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
我有一个使用 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