# createMutableDuck

### Prerequisites

{% hint style="warning" %}
Please read about [createMutableDuck](https://co-it.gitbook.io/ngrx-ducks/ngrx-ducks-core/architecture/getmutablereducer) first before continue here.
{% endhint %}

### Mutable Action Dispatcher

Working with immutable operations can be hard. It can also lead to code that is more difficult to read. The library [immerjs/immer](https://github.com/immerjs/immer) allows you to simply mutate your state tree. *Immer* will take care about immutability for you.

NgRx Ducks provides a binding to *immer* that allows you to simply mutate your state. Therefore you simply need to use the function  `createMutableDuck`. Its usage is nearly the same like `createDuck`. The only difference is that you do not need to return the next `state` in a reducer function since *immer* takes care of it.

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

```typescript
import { createMutableDuck } from '@ngrx-ducks/core';

@StoreChunk()
export class CounterMutableFacade {
  // Basic usage without reducer
  loadCount = createMutableDuck('[Counter] Load Count', dispatch<number>());

  // Usage with a case reducer
  increment = createMutableDuck(
    '[Counter] Increment value',
    (state: CounterState, payload: number) => (state.count += payload)
  );
}
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
You will find a full example of a mutable facade at [StackBlitz](https://stackblitz.com/edit/ngrx-ducks-12?file=src%2Fapp%2Fcounter%2Fstore%2Fcounter%2Fcounter-mutable.facade.ts).
{% endhint %}