如何将 NGRX Effect 转换为 NGRX Effect v15

huangapple go评论75阅读模式
英文:

How convert NGRX Effect to NGRX Effect v15

问题

我正在尝试将以下代码转换为 NGRX 15:

我是Angular新手,需要帮助。

"@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) {
  }

}

如何将 NGRX Effect 转换为 NGRX Effect v15

英文:

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&lt;any&gt; = this.actions.ofType(SNACKBAR_CLOSE)
    .pipe(
      tap(() =&gt; this.matSnackBar.dismiss())
    );

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

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

}

如何将 NGRX Effect 转换为 NGRX Effect v15

答案1

得分: 2

@Injectable()
export class SnackbarEffects {

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

  // this should work by wrapping it with `createEffect`
  showSnackbar: Observable<any> = createEffect(() => this.actions.pipe(
    ofType<SnackbarOpen>(SNACKBAR_OPEN),
    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) {
  }

}
英文:
@Injectable()
export class SnackbarEffects {

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

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

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

}

huangapple
  • 本文由 发表于 2023年4月4日 15:40:55
  • 转载请务必保留本文链接:https://go.coder-hub.com/75926698.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定