【发布时间】:2017-01-10 04:37:30
【问题描述】:
我有一个使用 Webpack 和 ngrx 商店的 Angular2 应用程序,它似乎正在工作,除了商店中没有维护状态(应用程序下的 Chrome 控制台中没有显示任何内容),但是它不会引发任何错误并且reducer返回正确的状态对象。唯一的复杂之处是应用程序使用了两个模块(延迟加载)和 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) {}
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);
});
}
显然没有操作文件,但我确实有,但已尝试简化它。
在另一个模块文件中,我只是简单地再次导入商店
..
@NgModule({
imports: [
CommonModule
..
, StoreModule.provideStore({access: Access}),
问题是它正确运行所有内容,同时没有抛出任何错误,但不写入存储。这个应用程序正式使用本地存储并且运行良好,但当然这不适用于隐私浏览。我们知道更简单的解决方案,但想开始使用商店。
我是否遗漏了什么...为什么它可以工作,但没有向 indexDB 写入任何内容?
问候
标记
【问题讨论】:
-
也许这是一个愚蠢的问题,但我看不到任何代码表明您正在访问/写入/读取 IndexDB?您如何将其写入应用程序中的 indexDB?
-
@ngrx/store是内存对象 storage - 它不会在任何地方保存数据。您必须使用其他方式将数据保存到 indexDB...@ngrx/store库的主要目的是提供在您的应用程序中访问应用程序状态的一致方式。 -
ngrx 示例应用保存到 (ngrx.github.io/example-app github.com/ngrx/example-app ) 到 indexDB
-
我们选择了 localForage (localforage.github.io/localForage),因为它更好地满足了我们的迫切需求。我简要地查看了上面的示例应用程序,看不到任何其他加载项,并且在我的搜索中,虽然不是很广泛,但找不到关于 ngrx 存储的推断内存存储不足的文档。因此它仍然没有解决。