Using @ngrx/store into angular 2 module

Question

I'm using @ngrx/store (also @ngrx/effects and @ngrx/store-devtools) in current application successfully. Now I want to make module, that will be ideal to be independent from rest of the application. Problem is how to also use @ngrx/store in it? Can I somehow just add new reducer into existing "app" store? I want to avoid to move model from module to app and make reducer registration into app. Do anyone have solution from this? Example code is below:

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

And in new module:

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

Also dose anyone know how to chnage name of @ngrx/store showing on devtool? Change it form ngrx-store-some_random_number to some app_name?

Many thanks

There are currently open issues rpthat relate to this: github.com/ngrx/store/issues/281 and github.com/ngrx/store/issues/211 And there is a proposed, but not yet implemented change: gist.github.com/MikeRyan52/5d361681ed0c81e38775dd2db15ae202 — cartant
– cartant, Commented Dec 1, 2016 at 22:55
This we'll be a great thing to have it. Do we can change name of current store? — CoYoTe
– CoYoTe, Commented Dec 2, 2016 at 9:04

Felix · Accepted Answer · 2017-10-31 06:49:13Z

As of ngrx4 you provide store as: StoreModule.forRoot({router: routerReducer})

@NgModule({
    imports: [
        StoreModule.forRoot({router: routerReducer}),
        EffectsModule.forRoot([...]),
        ...
    ],
    declarations: [],
    ...
})
export class AppModule {}

Then in your feature module, you can provide store as StoreModule.forFeature(...):

@NgModule({
    imports: [
        StoreModule.forFeature('feature', featureReducer),
        EffectsModule.forFeature([...]),
        ...
    ],
    declarations: [],
    ...
})
export class FeatureModule {}

The feature state will be then under state.feature key in store.

Use can use selectors to access feature store consistently:

export const selectFeatureModule = createFeatureSelector<FeatureState>('feature');
export const selectFeatureValue = createSelector(selectFeatureModule ,
(state: FeatureState) => state.someValue);

In feature module: an Angular component can use /slice the state as:

...
constructor(private store: Store<AppState>,) {
    this.store.select(selectFeatureValue)
        .subscribe(console.log.bind(console));

}
...

Collectives™ on Stack Overflow

Using @ngrx/store into angular 2 module

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related