@ ngrx/store组合了功能模块中的多个化简器 [英] @ngrx/store combine multiple reducers from feature module

问题描述

我目前正在开发一个简单的测试应用，以了解有关@ ngrx/store的更多信息.我有一个名为TrainingModule的模块，该模块应该存储一些练习和更多信息. 该代码有效，但我尝试在此处进行改进.我目前拥有的功能模块如下所示:

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

和

StoreModule.forFeature('training', trainingReducers)

但是，这给了我一个无法读取的控制台中未定义错误消息的属性"exercises".也许有人可以帮助我理解，我该如何从功能模块中收集所有减速器，并为此创建一个正确的选择器.

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.

推荐答案

我可以举一个例子.我使用index.ts从模块中捆绑了所有其他reducer，如下所示:

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

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

module/user.module.ts

import { reducers } from './reducers';
@NgModule({
    imports: [
        ...
        StoreModule.forFeature('userModule', reducers)
    ],
     ...
})
export default class UserModule { }

这篇关于@ ngrx/store组合了功能模块中的多个化简器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！