Listening for actions in @ngrx/store

I keep stumbling across the use case that I want to be informed in a Component when an event has arrived in my NgrxStore.

And yes, I know that a component should only have a direct dependency (selectors) on the state.

But this simply means that I have to maintain more additional 'StateKeys' or 'StateValues' in my State.

And I don't like this :-)

So I want to share a post of the awesome blog from Netanel Basal

Blog-Post: Listening for actions in @ngrx/store

Angular-Component

constructor(private dispatcher: Dispatcher) {}
dispatcher.filter(action => action.type === 'ADD_STORY_SUCCESS')
          .subscribe(() => this.form.reset())

Helper class to make the syntax more simple

@Injectable()
export class AppActions {
  _actions = new Subject<Action>();

  ofType( type : string ) {
    return this._actions.filter(( action : Action )
       => action.type === type);
  }

  nextAction( action : Action ) {
    this._actions.next(action);
  }

}

@Injectable()
export class MyDispacther extends Dispatcher {
  constructor( private actions: AppActions ) {
    super();
  }

  next( action: Action ) {
    super.next(action);
    this.actions.nextAction(action);
  }
}