How to dispatch an empty action?

Question

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?

score 22 · Answer 1 · answered Jan 12 '19 at 16:41

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

score 17 · Accepted Answer · answered Sep 29 '16 at 05:30

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

score 16 · Answer 3 · answered Sep 20 '19 at 15:18

16

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

answered Sep 20 '19 at 15:18

Antony

450
1
4
15

1

Works like charm in RxJs ~6.6.3, thank you! – Lautaro Jorge Garcia Jan 11 '22 at 13:43

score 13 · Answer 4 · answered Jun 21 '18 at 19:01

13

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

answered Jun 21 '18 at 19:01

Anton Dosov

326
2
6

1

`filter` is a really nice choice, in this way stream doesn't emit action until the condition is met, and we don't need to throw _empty_ action – Anton Kochev Aug 04 '22 at 17:25

score 11 · Answer 5 · answered Sep 05 '18 at 18:50

11

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

answered Sep 05 '18 at 18:50

ttugates

5,818
3
44
54

5

This is wrong, in his code he wants to dispatch an action sometimes, and sometimes nothing. – Kyoss Apr 23 '20 at 07:44

score 0 · Answer 6 · answered Jun 16 '21 at 05:37

With "rxjs": "~6.6.6", the flatmap has been depricated with merge map we can use the same behaviour

import { map, switchMap, catchError, mergeMap } from 'rxjs/operators';
import { of, EMPTY } from 'rxjs';

    addCategorie$ = createEffect(() =>
        this.actions$.pipe(
          ofType(ADD_CATEGORY),
          mergeMap((category) => this.categoryService.post(category.isCategoryOrVendor, category.model)
            .pipe(
              mergeMap(() => {
                this.backService.back();
                return EMPTY;
              }),
              catchError((error) => of(CATEGORY_ERROR(error)))
            )
          )
        )
      );

score 0 · Answer 7 · answered Dec 13 '22 at 15:40

Another case (without "of", "Observables" and etc.):

switchMap(([, projectId]) => {
  const result: Action[] = [];

  if (projectId === null) {
    return result;
  }

  result.push(GetAction({
    filter: {
      projectId,
    },
  }));

  // a lot of another cases

  return result;
}),

Michael Kang · Answer 8 · 2020-12-01T21:27:45.057

-2

If you do not want to dispatch an action, then just set dispatch to false:

 @Effect()
  foo$ = createEffect(() =>
    this.actions$.pipe(
      ofType(Actions.FOO),
      map(t => [])
    ),
    { dispatch: false }
  );

edited Dec 01 '20 at 21:27

answered Sep 30 '20 at 15:50

Michael Kang

52,003
16
103
135

How to dispatch an empty action?

8 Answers8

Linked