2016-12-01 5 views
3

Я использую @ ngrx/store (также @ ngrx/effects и @ ngrx/store-devtools) в текущем приложении успешно. Теперь я хочу создать модуль, который будет идеальным, чтобы быть независимым от остальной части приложения. Проблема в том, как использовать в нем @ ngrx/store? Могу ли я как-то просто добавить новый редуктор в существующий магазин «приложений»? Я хочу, чтобы избежать перемещения модели из модуля в приложение и сделать регистрацию редуктора в приложении. У кого-нибудь есть решение? Пример кода ниже:
Использование @ ngrx/store в угловой модуль 2

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

Также доза кто знает, как chnage имя @ ngrx/магазин показывая на devtool? Измените форму ngrx-store-some_random_number на какое-то имя_приложения?

Большое спасибо

+0

Есть в настоящее время открытые вопросы rpthat относятся к это: https://github.com/ngrx/store/issues/281 и https://github.com/ngrx/store/issues/211 И есть предлагаемое, но еще не выполненное изменение: https: // gist .github.com/MikeRyan52/5d361681ed0c81e38775dd2db15ae202 – cartant

+0

Это будет здорово. Можем ли мы изменить имя текущего магазина? – CoYoTe

ответ

2

На 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); 

В модуле особенность: угловой компонент может использовать/срез состояния, как:

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

} 
...