How convert NGRX Effect to NGRX Effect v15

Question

I am trying to convert the following code in NGRX 15

I'm new in angular and need to help.

"@ngrx/effects": "^15.4.0"


@Injectable()
export class SnackbarEffects {

  @Effect({
    dispatch: false
  })
  closeSnackbar: Observable<any> = this.actions.ofType(SNACKBAR_CLOSE)
    .pipe(
      tap(() => this.matSnackBar.dismiss())
    );

  @Effect()
  showSnackbar: Observable<any> = this.actions.ofType<SnackbarOpen>(SNACKBAR_OPEN)
    .pipe(
      map((action: SnackbarOpen) => action.payload),
      tap(payload => this.matSnackBar.open(payload.message, payload.action, payload.config)),
      delay(2000),
      map(() => new SnackbarClose())
    );

  constructor(private actions: Actions,
              private matSnackBar: MatSnackBar) {
  }

}

new syntax is `this.actions$.pipe(ofType(), ...)`. Use this answer to get more [helpful error messages](https://stackoverflow.com/questions/57247613/ngrx-effects-type-observableunknown-is-not-assignable-to-type-observable/57612215#57612215). And you need to pass `{ dispatch: false }` as the second argument to `createEffect` — Andrew Allen, Apr 04 '23 at 08:18

score 2 · Answer 1 · answered Apr 04 '23 at 17:40

@Injectable()
export class SnackbarEffects {

  closeSnackbar: Observable<any> = createEffect(() => this.actions    .pipe(
      ofType(SNACKBAR_CLOSE), //  use ofType operator
      tap(() => this.matSnackBar.dismiss())
    ),
    { dispatch: false} //  move config as the 2nd arg
);

  // this should work by wrapping it with `createEffect`
  showSnackbar: Observable<any> = createEffect(() => this.actions
    .pipe(
      ofType<SnackbarOpen>(SNACKBAR_OPEN), //  use ofType operator
      map((action: SnackbarOpen) => action.payload),
      tap(payload => this.matSnackBar.open(payload.message, payload.action, payload.config)),
      delay(2000),
      map(() => new SnackbarClose())
    ));

  constructor(private actions: Actions,
              private matSnackBar: MatSnackBar) {
  }

}

How convert NGRX Effect to NGRX Effect v15

1 Answers1