NgRx - Use one reducer for different state on selectors

Question

I have multiple selectors but they are all getting the same state when I dispatch one. Using a different reducer function for each Action does work but creates a ton of duplicate code. Is there a way to create a generic reducer?

export interface DataImportStoreState {
  dataImportAllocationClasses: fromReducers.DataImportState;
  dataImportFunds: fromReducers.DataImportState;
}

export const dataImportReducer: ActionReducerMap<DataImportStoreState> = {
  dataImportAllocationClasses: dataImportFundsReducer, // Works fine if i have dataImportAllocationClassesReducer
  dataImportFunds: dataImportFundsReducer,
};

export const getDataImportSoreState
  = createFeatureSelector<DataImportStoreState>(
  'dataImport',
);

export const getDataImportAllocationClassesState = createSelector(
  getDataImportSoreState,
  (state: DataImportStoreState) => state.dataImportAllocationClasses,
);

export const getDataImportFundsState = createSelector(
  getDataImportSoreState,
  (state: DataImportStoreState) => state.dataImportFunds,
);

This would be ideal. Currently my only solution is to make one of these per Import. I have 15 imports calls and i dont want to maintain 15 separate files that are all basically identical.

export function dataImportFundsReducer(
  state = defaultDataImportState,
  action: fromActions.DataImportFundsAction | fromActions.ImportAllocationClassesAction,
): DataImportState {

  switch (action.type) {

    case fromActions.IMPORT_ALLOCATION_CLASSES:
    case fromActions.IMPORT_FUNDS: {

      console.log(action.type, action.payload);

      return {
        ...state,
      };
    }
}

Answer 1

You can leverage this by using the combineReducers

Using a higher-order reducer

A higher-order reducer is a function that takes a name as an argument and returns a new reducer function as a result. We can use this pattern to create new instances of a reducer

For your case, this post will be useful.