Angular 6/NGRX 组合减速器 [英] Angular 6 / NGRX Combine Reducers

问题描述

我正在使用带有 NgRX 4 的 Angular 6.我想组合多个减速器.

I am using Angular 6 w/ NgRX 4. I have multiple reducers I would like to combine.

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

我的减速器是标准减速器，没什么特别的.

My reducers are standard reducers, nothing special there.

来自 React/Redux 背景，我会像这样设置多个减速器，但是在 Angular 中，当我尝试从商店中进行选择时，我得到了未定义.当我尝试使用开发工具查看商店时，我看不到任何减速器，状态只是 {}

Coming from a React / Redux background, I would set multiple reducers up like this, however in Angular when I attempt to select from the store I get undefined. When I attempt to view the store using the dev tools, I can see none of my reducers and state is simply {}

如何在 Angular 6/NgRX 4 中设置多个减速器?

How do I setup multiple reducers in Angular 6 / NgRX 4?

推荐答案

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,
};

这篇关于Angular 6/NGRX 组合减速器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！