# useActions

A facade is literally a data structure that bundles actions and case-reducers together. However, sometimes it is needed to only have the plain actions that can be used outside the context of the facade. Threfore, `getActions` has been created.

### Extract actions

You need plain action-creators in [NgRx's effects](https://ngrx.io/guide/effects). To use the action-creators from the facade you just need to use `getActions` and pass the class token of the Facade to it. This gives you vanilla NgRx action creators that can be used in the effect (`see effect.ts`).

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

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

@StoreChunk()
export class Chunk {
  greet = createDuck('Hello 🐥');
  farewell = createDuck('Bye 🐥', dispatch<string>());
  
  // other ducks ...
}

export const actions = useActions(StoreChunk);
```

{% endtab %}

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

```typescript
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { map } from 'rxjs/operators';
import { actions } from './chunk';

@Injectable()
export class Effect {
  sideEffect = createEffect(() => this.actions.pipe(
    ofType(facadeActions.greet),
    map(() => facadeActions.farewell('It is about time.'))
  ));

  constructor(private actions: Actions) {}
}
```

{% endtab %}
{% endtabs %}

### Prefix action

You pass a configuration to `useActions` containing a prefix that should be set before each action type.

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

@StoreChunk()
export class Chunk {
  greet = createDuck('Hello 🐥');
  farewell = createDuck('Bye 🐥', dispatch<string>());
  
  // other ducks ...
}

export const actions = useActions(StoreChunk, {prefix: 'counter'});

// Generates Action Creators...
// greet => '[Counter] Hello 🐥'
// farewell => '[Counter] Bye 🐥'
```

### Inlining

{% hint style="warning" %}
**Currently, inlining `useActions` is not possible due to a breaking change in TyepScript and ES2022-Module.**&#x20;

**If you already use inlining, please read** [**migrations/v15** ](https://co-it.gitbook.io/ngrx-ducks/migrations/v15)**to learn how to resolve this issue.**
{% endhint %}

You also can inline `getActions` 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="chunk.ts" %}

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

@StoreChunk()
export class Facade {
  // ❌ Does not work, please read the info box, above.
  static actions = useActions(Facade);
  
  greet = createDuck('Hello 🐥');
  farewell = createDuck('Bye 🐥', dispatch<string>());
  
  // other ducks ...
}
```

{% endtab %}

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

```typescript
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { map } from 'rxjs/operators';
import { Facade } from './facade';

@Injectable()
export class Effect {
  sideEffect = createEffect(() => this.actions.pipe(
    ofType(Facade.actions.greet),
    map(() => Facade.actions.farewell('It is about time.'))
  ));

  constructor(private actions: Actions) {}
}
```

{% endtab %}
{% endtabs %}