# createDuck

### Prerequisites

In Redux Actions are used to set up the communication between components. 

{% hint style="warning" %}
If you are not familiar with NgRx's Actions, we highly recommend to check their documentation (see [ngrx.io | Actions](https://ngrx.io/guide/store/actions)) first, before starting with Ducks.
{% endhint %}

### Action Dispatcher

Using `createDuck` allows you to create a fully typed action that also contains the action dispatcher. A Duck can dispatch itself. It expects at least one parameter, the action type. The sample below demonstrates how the property `greet` becomes a duck, which means that `greet` now is a method that additionally contains a function dispatch.

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

```typescript
import { createDuck, StoreChunk } from '@ngrx-ducks/core';

@StoreChunk()
export class Chunk {
  greet = createDuck('Hello 🐥');
}

/*
  
   greet()          // returns the action object: { type: 'Hello 🐥' }
   greet.dispatch() // dispatches the action to the store.

*/
```

{% endtab %}

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

```typescript
import { Component, OnInit } from '@angular/core';
import { Chunk } from './chunk';

@Component({ /* ... */})
export class SomeComponent implements OnInit {
  constructor(private chunk: Chunk) {}
  
  ngOnInit() {
    this.chunk.greet.dispatch()
  }
}
```

{% endtab %}
{% endtabs %}

{% hint style="warning" %}
Please note that `createDuck.dispatch` only works inside a class being annoted with **@StoreFacade**. You will receive an error in the console if you accidently forget`@StoreFacade` .
{% endhint %}

Often an action transports a payload. To define an action dispatcher with a payload, `createDuck` accepts a second parameter being able to set up a strictly typed action creator.

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

```typescript
import { createDuck, dispatch } from '@ngrx-ducks/core';

@StoreChunk()
export class Chunk {
  greet = createDuck('Hello 🐥', dispatch<string>());
}
```

{% endtab %}

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

```typescript
import { Component, OnInit } from '@angular/core';
import { Chunk } from './chunk';

@Component({ /* ... */})
export class SomeComponent implements OnInit {
  constructor(private chunk: Chunk) {}
  
  ngOnInit() {
    this.chunk.greet.dispatch('Good afternoon!')
  }
}
```

{% endtab %}
{% endtabs %}

The second parameter needs to be filled with `dispatch<TPayload>` where `TPaylod` defines the type of the payload. In the component the dispatch-method now expects a parameter with the defined payload-type.

### Case reducer

A duck can also contain a case-reducer.

{% hint style="info" %}
A case-reducer is a method being executed when the corresponding action has been dispatched to the Store.
{% endhint %}

According to the shape of the case-reducer the action dispatcher is generated accordingly.

1. If a case-reducer proceeds a payload the dispatcher expects a payload.
2. If a case-reducer has **no** payload, the dispatcher expects **no** payload.

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

```typescript
import { createDuck, dispatch } from '@ngrx-ducks/core';
import { State } from './state.ts';

@StoreChunk()
export class Chunk {
  greet = createDuck(
    'Hello 🐥',
    (state: SomeState, payload: string) => ({
      ...state,
      greetings: [...state.greetings, payload]
    });
  );
  
  noPayload = createDuck(
    'Hello 🤷‍♀️',
    (state: SomeState) => ({
      ...state,
      greetings: [...state.greetings, 'static mutation']
    });
  );
}
```

{% endtab %}

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

```typescript
import { Component, OnInit } from '@angular/core';
import { Chunk } from './chunk';

@Component({ /* ... */})
export class SomeComponent implements OnInit {
  constructor(private chunk: Chunk) {}
  
  ngOnInit() {
    // case-reducer with payload
    this.someFacade.greet.dispatch('Good afternoon!');
    
    // case-reducer without payload
    this.someFacade.noPayload.dispatch();
  }
}
```

{% endtab %}

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

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

{% endtab %}
{% endtabs %}

{% hint style="info" %}
One last question remains. How does the Store know about the case-reducers that has been added to a facade? Please read the section [getReducer](https://co-it.gitbook.io/ngrx-ducks/ngrx-ducks-core/architecture/getreducers) to learn how the reducer-function is generated by **@ngrx-ducks** and how the reducer gets finally bound to the Store.
{% endhint %}