angularngrxngrx-store-4.0

@ngrx/store combine multiple reducers from feature module


I am currently working on a simple test app to learn more about the @ngrx/store. I have a module called TrainingModule which should store some exercises and more information. The code works, but i try to improve here. What i currently have is my feature module that looks like this:

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

and my reducer that looks like that:

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

So far so good. In my template I select my exercise from the store with that

exercise$: Observable<IExercise[]>;

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

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

So what i want to do now combine my reducers so that i don´t have to add every reducer like this

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

In all my modules. I tried to collect all reducers with

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

and

StoreModule.forFeature('training', trainingReducers)

But that gave me a Cannot read property 'exercises' of undefined error message in the console. Maybe someone can help me understand, how do i collect all reducers from the feature modul and create a correct selector for that.


Solution

  • I can give you an example how I did it. I used an index.ts to bundle all other reducers from within the module like this:

    module/reducers/index.ts

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

    module/user.module.ts

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