CODEWITHSUNDEEP
angulartypescriptrxjs5ngrx
Hongbo Miao
Hongbo Miao

Reputation: 49704

How to dispatch an empty action?

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?

Upvotes: 32

Views: 30902

Answers (8)

Dmitriy Ivanko
Dmitriy Ivanko

Reputation: 1075

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

Upvotes: 0

San Jaisy
San Jaisy

Reputation: 17058

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

Upvotes: 0

Michael Kang
Michael Kang

Reputation: 52837

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

Upvotes: -1

Antony
Antony

Reputation: 500

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

Upvotes: 17

hugo der hungrige
hugo der hungrige

Reputation: 12912

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

Upvotes: 22

ttugates
ttugates

Reputation: 6271

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

Upvotes: 11

Anton Dosov
Anton Dosov

Reputation: 346

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

Upvotes: 14

cartant
cartant

Reputation: 58400

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

Upvotes: 17

Related Questions