Angular升级：将@Effect代码转换为createEffect的实现方案

以下是将你提供的@Effect代码转换为NgRx createEffect 形式的实现：

import { createEffect, Actions, ofType } from '@ngrx/effects';
import { switchMap, map, catchError } from 'rxjs/operators';
import { of } from 'rxjs';
// 确保导入对应的action类/创建器及服务

getTasks$ = createEffect(() => 
  this.actions$.pipe(
    ofType(taskActions.LOAD_ACCOUNTS_TASKS),
    switchMap(() => {
      return this.rest.get(`${tasksUrl}`).pipe(
        map((response) => new taskActions.LoadTasksSuccess(response)),
        catchError((err: HttpErrorResponse) => of(
          err.status === 401 
            ? new oauthActions.FailedRequestWith401(new taskActions.LoadTasks()) 
            : new taskActions.LoadTasksFail()
        ))
      );
    })
  )
);

关键改动说明： #

• 移除@Effect()装饰器，改用createEffect函数创建副作用
• createEffect接收一个返回Observable的箭头函数作为参数，内部逻辑与原代码保持一致
• 若你的项目已使用NgRx 8+推荐的action creator写法（通过createAction定义），可将new taskActions.LoadTasksSuccess(response)替换为taskActions.loadTasksSuccess(response)这类调用方式，代码逻辑不受影响

内容的提问来源于stack exchange，提问作者Dino