# 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`).

{% hint style="info" %}
Please refer to the [demo on StackBlitz](https://stackblitz.com/edit/ngrx-ducks-9?embed=1\&file=src/app/counter/store/index.ts) to see a full example.
{% endhint %}

{% tabs %}
{% tab title="chunk.ts" %}

```typescript
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);
```

{% endtab %}

{% tab title="index.ts" %}

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

{% endtab %}

{% tab title="module.ts" %}

```typescript
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 { }
```

{% endtab %}

{% tab title="greeting.state.ts" %}

```typescript
export interface GreetingState {
  greetings: string[];
}
```

{% endtab %}
{% endtabs %}

### 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.

{% tabs %}
{% tab title="facade.ts" %}

```typescript
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 ....
}
```

{% endtab %}

{% tab title="index.ts" %}

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

{% endtab %}
{% endtabs %}