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. 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).

chunk.ts

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);

effect.ts

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) {}
}

Prefix action

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

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

Currently, inlining useActions is not possible due to a breaking change in TyepScript and ES2022-Module.

If you already use inlining, please read migrations/v15 to learn how to resolve this issue.

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.

chunk.ts

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 ...
}

effects.ts

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) {}
}