Angular 组件不加载效果 return 缓存结果

Question

我正在尝试缓存 http 请求以减少流量，在任务效果中我正在检查是否已检索到用户任务。但是当我这样做时，当我 return 缓存任务时，组件不会呈现。如果您删除它并再次发出 http 请求，它会继续工作。

这是 TasksEffect class

@Injectable()
export class TasksEffect {
  @Effect() fetchEffects = this.actions$.pipe(
    ofType(TaskListActions.FETCH_TASKS),
    withLatestFrom(this.store.select('tasksModule')),
    switchMap(([action, tasksModule]) => {
      if (tasksModule.tasks.length) {
        return of(new TaskListActions.SetTasks([...tasksModule.tasks]));
      }
      return this.taskService.fetchTasks((action as TaskListActions.FetchTasks).interval)
        .pipe(
          catchError(err => of(err)),
          switchMap(tasks => of(new TaskListActions.SetTasks(tasks))),
        );
    })
  );

  constructor(private taskService: TaskService, private store: Store<fromTasks.AppState>, private actions$: Actions) {
  }
}

我的代码有问题吗？如果是这样，我该如何解决？还有更好的方法来缓存 http 请求，比如 react

中的 memoize

Answer 1

在您的代码中 catchError(err => of(err)) 应该在 switchMap 之后，因为如果出现错误，错误将减少为 TaskListActions.SetTasks。

像那样尝试，如果它不起作用 - 请在评论中告诉我。那你需要检查其他地方了，效果很简单，可能this.taskService.fetchTasks有问题

@Injectable()
export class TasksEffect {
    @Effect() fetchEffects = this.actions$.pipe(
        ofType(TaskListActions.FETCH_TASKS),
        withLatestFrom(this.store.select('tasksModule')),
        switchMap(([action, tasksModule]) => {
            if (tasksModule.tasks && tasksModule.tasks.length) {
                return of(new TaskListActions.SetTasks([...tasksModule.tasks]));
            }
            return this.taskService.fetchTasks((action as TaskListActions.FetchTasks).interval)
                .pipe(
                    map(tasks => new TaskListActions.SetTasks(tasks)),
                    catchError(err => of(err)),
                );
        })
    );

    constructor(private taskService: TaskService, private store: Store<fromTasks.AppState>, private actions$: Actions) {
    }
}

Angular 组件不加载效果 return 缓存结果

Angualr componen't doesnt mount if effects return cached results

angular

ngrx

ngrx-store

ngrx-effects