Угловые 6 / NGRX зерноуборочные комбайны

Question

Я использую Angular 6 с NgRX 4. У меня есть несколько редукторов, которые я хотел бы объединить.

app.module.ts

  import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';

    import { StoreModule } from '@ngrx/store';
    import { EffectsModule } from '@ngrx/effects';

    import { StoreDevtoolsModule } from '@ngrx/store-devtools';

    import { AppComponent } from './app.component';
    import counterEffects from './store/counter/counter.effects';

    import reducers from './store/reducers';

    @NgModule({
      declarations: [AppComponent],
      imports: [
        BrowserModule,
        StoreModule.forRoot(reducers),
        EffectsModule.forRoot([counterEffects]),
        StoreDevtoolsModule.instrument({
          maxAge: 10,
        }),
      ],
      providers: [],
      bootstrap: [AppComponent],
    })
    export class AppModule {}

reducers.ts

import { combineReducers } from '@ngrx/store';
import { reducer as counterReducer, key as counterKey } from './counter';
import { reducer as profileReducer, key as profileKey } from './profile';

const appReducer = combineReducers({
  [counterKey]: counterReducer,
  [profileKey]: profileReducer,
});

export default (state, action) => {
  if (action.type === 'REDIRECT_TO_EXTERNAL') {
    state = undefined;
  }

  return appReducer(state, action);
};

Мои редукторы - стандартные редукторы, ничего особенного там нет.

Исходя из фона React / Redux, я бы настроил несколько редукторов, как это, но в Angular, когда я пытаюсь выбрать из магазина, я получаю неопределенное значение. Когда я пытаюсь просмотреть магазин с помощью инструментов разработчика, я не вижу ни одного из моих редукторов, а состояние просто {}

Как настроить несколько редукторов в Angular 6 / NgRX 4?

Answer 1

import { ActionReducerMap } from '@ngrx/store';
import { reducer as counterReducer, key as counterKey } from './counter';
import { reducer as profileReducer, key as profileKey } from './profile';

export interface IAppState {
  [counterKey]: any;
  [profileKey]: any;
}

export const reducers: ActionReducerMap<IAppState> = {
  [counterKey]: counterReducer,
  [profileKey]: profileReducer,
};

Answer 2

мне помог этот блог: https://blog.strongbrew.io/combinereducers-enhanced/

попробуйте это:

      export interface IAppState {
  [counterKey]: NestedType;
  [profileKey]: any;
}

export interface NestedType {
      [nestedKey1]: any;
      [nestedKey2]: any;
    }

export const reducers: ActionReducerMap<IAppState> = {
  [counterKey]: combineReducers({
      [nestedKey1]: nestedKey1Reducer;
      [nestedKey2]: nestedKey2Reducer;
  }),
  [profileKey]: profileReducer,
};