getReducer

Generate the reducer function

From a facade all case-reducers are extracted and combined into a single reducer function by using getReducer.

Since a reducer expects an initial state, getReducer needs the initial state to be passed as well as the class token of the respective facade.

The generated reducer can then be registered in NgRx's action reducer map (see index.ts).

Please refer to the demo on StackBlitz to see a full example.

chunk.ts

import { getReducer, StoreFacade } from '@ngrx-ducks/core';

import { GreetingState } from './greeting.state';

@StoreChunk()
export class Chunk {
  // createDuck, bindSelectors, usePick ....
}

const initialState: GreetingState = { greetings: [] };

export const facadeReducer = getReducer(initialState, Chunk);

index.ts

import { Action, combineReducers } from '@ngrx/store';
import { facadeReducer } from './facade';
import { GreetingState } from './greeting.state';

export interface State {
  greeting: GreetingState;
}

export function reducers(state: State, action: Action) {
  return combineReducers<State>({
    greeting: facadeReducer
  })(state, action);
}

module.ts

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

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

import { reducers } from './index';

@NgModule({
  imports: [
    CommonModule,
     StoreModule.forFeature('feature-a', reducers)
  ],
  // ...
})
export class CounterModule { }

greeting.state.ts

export interface GreetingState {
  greetings: string[];
}

Inlining

You also can inline getReducer in your Facade holding everything together. It's up to you which style you prefer. The benefit of inlining is, that the Facade becomes the only thing you import somewhere else.

facade.ts

import { getReducer, StoreFacade } from '@ngrx-ducks/core';

import { GreetingState } from './greeting.state';

const initialState: GreetingState = { greetings: [] };

@StoreFacade()
export class Facade {
  static reducer = getReducer(initialState, Facade);
  
  // createDuck, bindSelectors, usePick ....
}

index.ts

import { Action, combineReducers } from '@ngrx/store';
import { Facade } from './facade';
import { GreetingState } from './greeting.state';

export interface State {
  greeting: GreetingState;
}

export function reducers(state: State, action: Action) {
  return combineReducers<State>({
    greeting: Facade.reducer
  })(state, action);
}