@ ngrx/storeは、フィーチャモジュールの複数のレデューサーを結合します。

Question

現在、@ ngrx/storeの詳細については、簡単なテストアプリケーションで作業しています。私はTrainingModuleというモジュールを用意しています。 コードは機能しますが、ここで改善しようとしています。そのように見えます

@NgModule({ 
    imports: [ 
    CommonModule, 
    TrainingRoutingModule, 
    StoreModule.forFeature('exercises', exerciseReducer) 
    ], 
    declarations: [ 
    TrainingDashboardComponent, 
    TrainingCoreComponent, 
    TrainingNavComponent, 
    TrainingPlanComponent, 
    ExerciseOverviewComponent, 
    ExerciseListComponent] 
}) 
export class TrainingModule { 
} 

と私の減速：これまでのところは良い

export interface ExerciseState { 
    exercises: IExercise[]; 
} 

export interface State extends fromRoot.State { 
    'exercises': ExerciseState; 
} 

export const initialState: ExerciseState = { 
    exercises: [ 
    {id: 1, name: 'Exc 1'}, 
    {id: 2, name: 'Exc 2'} 
    ] 
}; 

export function exerciseReducer(state: ExerciseState = initialState, action: any): ExerciseState { 
    switch (action.type) { 
    default: 
     return state; 
    } 
} 

export const getExerciseState = createFeatureSelector<ExerciseState>('exercises'); 
export const getExercises = createSelector(getExerciseState, state => state.exercises); 

何私が現在持っていることは、このようになります私の機能モジュールです。私のテンプレートでは、私は私はこの

StoreModule.forFeature('exercises', exerciseReducer); 
StoreModule.forFeature('sample', sampleReducer); 
StoreModule.forFeature('sample1', sampleReducer1); 

のように、すべての減速を追加する必要がドントように、今、私のレデューサーを組み合わせて何をしたいのかだから

exercise$: Observable<IExercise[]>; 

    constructor(private store: Store<State>) { } 

    ngOnInit() { 
    this.exercise$ = this.store.select(getExercises); 
    } 

で店からの私の運動を選択します私のすべてのモジュール。 は私が

export const trainingReducers = { 
    'exercise': exerciseReducer 
}; 

と

StoreModule.forFeature('training', trainingReducers) 

ですべてのレデューサーを収集しようとしましたが、それはコンソールに未定義のエラーメッセージのプロパティ「演習」を読み取ることができません私を与えました。誰かが私の理解を助けるかもしれません、どのように私はフィーチャモジュルからすべてのレデューサーを収集し、それのための正しいセレクターを作成するのですか？

Answer 1

私はあなたにどのようにしたかの例を挙げることができます。

import * as fromRoot from '../../../reducers'; 
import * as fromSearch from './search'; 
import * as fromUserDetail from './user-detail'; 
import * as fromDetailBase from './base'; 


export interface UserModuleState { 
    search: fromSearch.State; 
    detail: fromUserDetail.State; 
    detailBase: fromDetailBase.State; 
} 

export interface State extends fromRoot.State { 
    userModule: UserModuleState;  
} 

export const reducers = {  
    search: fromSearch.reducer, 
    detail: fromUserDetail.reducer, 
    detailBase : fromDetailBase.reducer 
}; 

export const selectUserModuleState = createFeatureSelector<UserModuleState>('userModule'); 


export const selectSearchState = createSelector(
    selectUserModuleState, (state: UserModuleState) => state.search 
); 
export const getSearchLoading = createSelector(selectSearchState, fromSearch.getLoading); 
export const getSearchEntities = createSelector(selectSearchState, fromSearch.getEntities); 

モジュール/ user.module.tsに

import { reducers } from './reducers'; 
@NgModule({ 
    imports: [ 
     ... 
     StoreModule.forFeature('userModule', reducers) 
    ], 
    ... 
}) 
export default class UserModule { }