angular - NGRX:如何从内部效果中使​​用不同的有效负载多次调用相同的服务

标签 angular typescript ngrx rxjs6

我不想使用 forkJoin 内部效果

在我看来,我得到了一组 id,并且在这些 id 的帮助下,我想多次调用服务。 每次收到回复时,我都想发送一个操作来更新我的商店

@Injectable()
export class MovieEffects {
  loadMovies$ = createEffect(() =>
    this.actions$.pipe(
      ofType('[Movies Page] Load Movies'),

     //here i am getting one array object via action,  e.g. = [{id: 1},{id: 2},{id: 3},{id: 4} ]
     //and here i want to call same service 4 time as per array length
     // every time when get response i want to dispatch one action with response payload

      mergeMap((action) => this.moviesService.getAll()
        .pipe(
          map(movies => ({ type: '[Movies API] Movies Loaded Success', payload: movies })),
          catchError(() => of({ type: '[Movies API] Movies Loaded Error' }))
        )
      )
    )
  );

  constructor(
    private actions$: Actions,
    private moviesService: MoviesService
  ) {}
}

最佳答案

只需对 id 数组中的每个执行一次,然后在该循​​环中调用您的服务,创建和订阅新的可观察量,并在完成后分派(dispatch)操作。

    loadMovies$ = createEffect(() =>
      this.actions$.pipe(
        ofType('[Movies Page] Load Movies'),
        tap((action) => {
         action.payload.forEach(id => 
            this.movieService.getMovie(id).pipe(
                map(movie => this.store.dispatch(new fromStore.GetMovieSuccess(movie)),
                catchError(() => this.store.dispatch(new fromStore.GetMovieFail(id)))
              .subscribe();
        } 
       )
     ), {dispatch: false}
    );

我个人几乎总是使用 {dispatch: false} 作为我的效果并手动分派(dispatch)事件,因为我不喜欢总是将它们放在效果的末尾,并且经常遇到一些其他语法问题。

关于angular - NGRX:如何从内部效果中使​​用不同的有效负载多次调用相同的服务,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59284059/

相关文章:

javascript - javascript 包、node 包和 react 包有什么区别?

d3.js - 如何在 Typescript 中调用 stopPropagation

javascript - Web Workers 可以访问 Vue 应用程序中定义的类吗?

redux - 在效果失败/错误的情况下防止路由器导航

angular - NgRx router-store 在离开当前页面时发出路由参数更改

angular - RxJS 'Map' 运算符在 Angular 6 中不起作用

http - 从 URL 下载文件到用户可访问的位置

angular - 如何使用 tomcat 或应用程序服务器的环境变量以 Angular 配置基本 href?

Typescript 通过 in 运算符进行类型保护

angular - 升级@ngrx/Store 时,类型 'payload' 上不存在属性 'Action'