> For the complete documentation index, see [llms.txt](https://co-it.gitbook.io/ngrx-ducks/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://co-it.gitbook.io/ngrx-ducks/ngrx-ducks-core/architecture/createduck.md).

# 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](/ngrx-ducks/ngrx-ducks-core/architecture/getreducers.md) to learn how the reducer-function is generated by **@ngrx-ducks** and how the reducer gets finally bound to the Store.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://co-it.gitbook.io/ngrx-ducks/ngrx-ducks-core/architecture/createduck.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.