使用@ngrx/store进入angular2模块
Using @ngrx/store into angular 2 module
我在当前应用程序中成功使用了@ngrx/store(还有@ngrx/effects 和@ngrx/store-devtools)。现在我想制作模块,这将是独立于应用程序其余部分的理想选择。问题是如何在其中也使用@ngrx/store? 我能否以某种方式将新的减速器添加到现有的 "app" 存储中? 我想避免将模型从模块移动到应用程序并将减速器注册到应用程序中。有人对此有解决方案吗?示例代码如下:
// App declarations
export const APP_IMPORTS = [
.
.
.
StoreModule.provideStore(reducer),
EffectsModule.run(someEffects),
STORE_DEV_TOOLS_IMPORTS
];
@NgModule({
declarations: [
APP_DECLARATIONS,
AppComponent
],
imports: [
APP_IMPORTS
],
providers: [APP_PROVIDERS],
bootstrap: [AppComponent]
})
export class AppModule {
}
在新模块中:
// Module declaration
@NgModule({
imports: [CommonModule,
FormsModule,
StoreModule.provideStore({ counter: counterReducer }) // <-- how to change this to just add to current store new reducer??
],
exports: [MyTestComponent],
declarations: [MyTestComponent],
})
export class SomeModule {
}
还有谁知道如何更改在 devtool 上显示的@ngrx/store 的名称?将其从 ngrx-store-some_random_number 更改为 app_name?
非常感谢
从 ngrx4 开始,您提供的商店为:StoreModule.forRoot({router: routerReducer})
@NgModule({
imports: [
StoreModule.forRoot({router: routerReducer}),
EffectsModule.forRoot([...]),
...
],
declarations: [],
...
})
export class AppModule {}
然后在您的功能模块中,您可以将商店提供为 StoreModule.forFeature(...)
:
@NgModule({
imports: [
StoreModule.forFeature('feature', featureReducer),
EffectsModule.forFeature([...]),
...
],
declarations: [],
...
})
export class FeatureModule {}
然后 feature
状态将在存储中的 state.feature
键下。
使用可以使用选择器一致地访问特征存储:
export const selectFeatureModule = createFeatureSelector<FeatureState>('feature');
export const selectFeatureValue = createSelector(selectFeatureModule ,
(state: FeatureState) => state.someValue);
在功能模块中:Angular 组件可以使用 /slice 状态为:
...
constructor(private store: Store<AppState>,) {
this.store.select(selectFeatureValue)
.subscribe(console.log.bind(console));
}
...
我在当前应用程序中成功使用了@ngrx/store(还有@ngrx/effects 和@ngrx/store-devtools)。现在我想制作模块,这将是独立于应用程序其余部分的理想选择。问题是如何在其中也使用@ngrx/store? 我能否以某种方式将新的减速器添加到现有的 "app" 存储中? 我想避免将模型从模块移动到应用程序并将减速器注册到应用程序中。有人对此有解决方案吗?示例代码如下:
// App declarations
export const APP_IMPORTS = [
.
.
.
StoreModule.provideStore(reducer),
EffectsModule.run(someEffects),
STORE_DEV_TOOLS_IMPORTS
];
@NgModule({
declarations: [
APP_DECLARATIONS,
AppComponent
],
imports: [
APP_IMPORTS
],
providers: [APP_PROVIDERS],
bootstrap: [AppComponent]
})
export class AppModule {
}
在新模块中:
// Module declaration
@NgModule({
imports: [CommonModule,
FormsModule,
StoreModule.provideStore({ counter: counterReducer }) // <-- how to change this to just add to current store new reducer??
],
exports: [MyTestComponent],
declarations: [MyTestComponent],
})
export class SomeModule {
}
还有谁知道如何更改在 devtool 上显示的@ngrx/store 的名称?将其从 ngrx-store-some_random_number 更改为 app_name?
非常感谢
从 ngrx4 开始,您提供的商店为:StoreModule.forRoot({router: routerReducer})
@NgModule({
imports: [
StoreModule.forRoot({router: routerReducer}),
EffectsModule.forRoot([...]),
...
],
declarations: [],
...
})
export class AppModule {}
然后在您的功能模块中,您可以将商店提供为 StoreModule.forFeature(...)
:
@NgModule({
imports: [
StoreModule.forFeature('feature', featureReducer),
EffectsModule.forFeature([...]),
...
],
declarations: [],
...
})
export class FeatureModule {}
然后 feature
状态将在存储中的 state.feature
键下。
使用可以使用选择器一致地访问特征存储:
export const selectFeatureModule = createFeatureSelector<FeatureState>('feature');
export const selectFeatureValue = createSelector(selectFeatureModule ,
(state: FeatureState) => state.someValue);
在功能模块中:Angular 组件可以使用 /slice 状态为:
...
constructor(private store: Store<AppState>,) {
this.store.select(selectFeatureValue)
.subscribe(console.log.bind(console));
}
...