@ngrx/store combine multiple reducers from feature module

Question

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. T

Answer 1

Your setup is almost correct.

In the createFeatureSelector function you declare a feature key in the root of the store, 'exercises' in the example. So, you are going to select store.exercises.exercises.id for example and feature selector is just a shortcut to store.exercises.

However, in the StoreModule.forFeature('training', trainingReducers) call you defined 'training' as the root key for your feature module.

The correct setup could look like this:

export const featureReducersMap = {
  exercise: exerciseReducer,
  anyOtherKey: anyOtherReducer
};

StoreModule.forFeature('myFeatureModule', featureReducersMap);

export interface FeatureState{
  exercise: string;
  anyOtherKey: number;
}

Then write selectors like:

export const featureSelector = createFeatureSelector<FeatureState>('myFeatureModule');

export const exerciseSelector = createSelector(
  featureSelector,
  (state: FeatureState) => state.exercise
);

It is recommended to store the feature key in the variable instead of hardcoding it.

Answer 2

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