# Introduction

**@ngrx-ducks** is built to simplify the work with [NgRx](https://ngrx.io).

1. ⚡️ Simpler Action handling through the [Ducks refactoring pattern](https://redux.js.org/introduction/ecosystem/#community-conventions).
2. 👓 More discoverability through an intuitive & typed API.
3. 🤗 Fully compatible with NgRx's type system.

## :star: Do you like NgRx Ducks?

You can show your appreciation for NgRx Ducks by :star:[ starring the project at GitHub](https://github.com/co-IT/ngrx-ducks).

## :train: Journey

NgRx Ducks already took a long journey. The API has changed a lot in the past, because we want to provide a clean way to work with State Management.

Based on our experiences with our customers' projects, we have improved NgRx Ducks step-by-step.\
Depending on your Knowledge, your style & your needs, NgRx Ducks can deliver different API-flavours.

## :arrow\_forward: Demos

We highly recommend studying the [Docs](https://co-it.gitbook.io/ngrx-ducks/ngrx-ducks-core) to learn about the API, but to get a taste how working with NgRx Ducks looks like, you can check out several Demo applications.

1. [Counter with Auto Store Registration & allowing mutable state mutations](https://stackblitz.com/edit/ngrx-ducks-latest) ***recommended***
2. [Counter allowing mutable state mutations](https://stackblitz.com/edit/ngrx-ducks-12-6w8xyi?file=src/app/counter/store/counter/counter.facade.ts) *manually register reducer in store*
3. [Counter using immutable state mutations](https://stackblitz.com/edit/ngrx-ducks-12?file=src/app/counter/store/counter/counter.facade.ts)

## :man\_running: Quick Start <a href="#id-47bd" id="id-47bd"></a>

Please refer to the [Quick Start](https://co-it.gitbook.io/ngrx-ducks/ngrx-ducks-core/guides/quick-start) to learn about NgRx Ducks' building blocks and how it helps to simplify coding NgRx applications.

The following video demonstrates how a NgRx project can be refactored to NgRx Ducks.

{% embed url="<https://youtu.be/G2hemLS9o0E>" %}
Refactor vanilla NgRx (YouTube)
{% endembed %}

## How does it work? <a href="#id-47bd" id="id-47bd"></a>

This library acts as a *thin* layer on top of NgRx. It automatically creates action creators and reducer functions for you. Furthermore, you get a service that you can use in your components. This Service provides a strictly typed API allowing both dispatching actions and selecting data from the Store.

The NgRx Ducks library does not modify the existing behaviour of NgRx. It only instruments the Observable provided by the Store and the [Store](https://ngrx.io/api/store/Store)’s method `dispatch.`

![](https://miro.medium.com/max/1400/1*CNQiBDBvZ7LEec6XRlaXXA.png)

{% hint style="info" %}
Since NgRx Ducks only depends on *`dispatch`* and the fact that the Store exposes an Observable it is pretty safe that NgRx Ducks remains compatible with NgRx even if a release contains breaking changes. 🙏
{% endhint %}

## Support

This library is used and maintained by [co-IT.eu GmbH](https://co-it.eu), a small software consultancy start-up located in Karlsruhe, Germany.