How to dispatch an empty action?

Question

I am using ngrx/effects.

How can I dispatch an empty action?

This is how I am doing now:

 @Effect() foo$ = this.actions$
    .ofType(Actions.FOO)
    .withLatestFrom(this.store, (action, state) => ({ action, state }))
    .map(({ action, state }) => {
      if (state.foo.isCool) {
        return { type: Actions.BAR };
      } else {
        return { type: 'NOT_EXIST' };
      }
    });

Since I have to return an action, I am using return { type: 'NOT_EXIST' };.

Is there a better way to do this?

Solution 1

I've used similar unknown actions, but usually in the context of unit tests for reducers.

If you are uneasy about doing the same in an effect, you could conditionally emit an action using mergeMap, Observable.of() and Observable.empty() instead:

@Effect() foo$ = this.actions$
  .ofType(ChatActions.FOO)
  .withLatestFrom(this.store, (action, state) => ({ action, state }))
  .mergeMap(({ action, state }) => {
    if (state.foo.isCool) {
      return Observable.of({ type: Actions.BAR });
    } else {
      return Observable.empty();
    }
  });

Solution 2

The choosen answer does not work with rxjs6 any more. So here is another approach.

Although I prefer filtering for most cases as described in an another answer, using flatMap can sometimes be handy, especially when you are doing complex stuff, too complicated for a filter function:

import { Injectable } from '@angular/core';
import { Actions, Effect, ofType } from '@ngrx/effects';
import { flatMap } from 'rxjs/operators';
import { EMPTY, of } from 'rxjs';

@Injectable()
export class SomeEffects {
  @Effect()
  someEffect$ = this._actions$.pipe(
    ofType(SomeActionTypes.Action),
    flatMap((action) => {
      if (action.payload.isNotFunny) {
        return of(new CryInMySleepAction());
      } else {
        return EMPTY;
      }
    }),
  );

  constructor(
    private _actions$: Actions,
  ) {
  }
}

Solution 3

As of ngrx 8 you'll get a run-time error if you try to dispatch an empty action, so I think just filter them out so they're not dispatched.

@Effect() foo$ = this.actions$.pipe(
    ofType(Actions.FOO),
    withLatestFrom(this.store, (action, state) => ({ action, state })),
    map(({ action, state }) => {
      if (state.foo.isCool) {
        return { type: Actions.BAR };
      }
    }),
    filter(action => !!action)
);

Solution 4

The solution I was looking for involved using @Effect({ dispatch: false }).

  @Effect({ dispatch: false })
  logThisEffect$: Observable<void> = this.actions$
    .ofType(dataActions.LOG_THIS_EFFECT)
    .pipe(map(() => console.log('logThisEffect$ called')));

Solution 5

I'd do it the following way:

@Effect() foo$ = this.actions$
    .ofType(Actions.FOO)
    .withLatestFrom(this.store, (action, state) => ({ action, state }))
    .filter(({ action, state }) => state.foo.isCool)
    .map(({ action, state }) => {
      return { type: Actions.BAR };
    });

View more solutions

Comments

[Kyoss]

This is wrong, in his code he wants to dispatch an action sometimes, and sometimes nothing.

[lautarojgarcia177]

Works like charm in RxJs ~6.6.3, thank you!