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