Tengo el siguiente código, en el que estoy extrayendo datos de una variedad de fuentes y configurando un indicador de carga una vez que está hecho. Por el momento, sin embargo, es bastante engorroso de mantener. ¿Cómo puedo hacer para arreglarlo?
constructor( private courseContentFacade: CourseContentFacade, private changeDetectorRef: ChangeDetectorRef ) { this.courseContentFacade .getUnsplashPhotos() .pipe(takeUntil(this.ngUnsubscribe)) .subscribe((unsplashPhotos) => { this.unsplashPhotosLoaded = false; if (unsplashPhotos) { this.parseUnsplashPhotos(unsplashPhotos); } this.courseContentFacade .getPexelsPhotos() .pipe(takeUntil(this.ngUnsubscribe)) .subscribe((pexelsPhotos) => { this.unsplashPhotosLoaded = false; if (pexelsPhotos) { this.parsePexelsPhotos(pexelsPhotos); } setTimeout( () => { this.courseMediaItemsLoaded = true; this.pexelsPhotosLoaded = true; this.unsplashPhotosLoaded = true; }, environment.production ? 2500 : 1000 ); }); }); }Así es como podría modificar esto para que sea un RxJS un poco más idiomático. Este código aún se apoya en gran medida en el uso del estado global.
Cuanto menos requiera su aplicación en su conjunto un estado global mutable, más fácil será mantenerla y ampliarla. Esto es 5x - 10x tan cierto cuando se trata de RxJS.
Aun así, el uso de operadores de orden superior (en este caso, mergeMap) ayuda mucho a reducir el anidamiento y la complejidad creada aquí :)
constructor( private courseContentFacade: CourseContentFacade, private changeDetectorRef: ChangeDetectorRef ) { this.courseContentFacade.getUnsplashPhotos().pipe( tap(_ => this.unsplashPhotosLoaded = false), tap(unsplashPhotos => { if (unsplashPhotos) { this.parseUnsplashPhotos(unsplashPhotos); } }), mergeMap(_ => this.courseContentFacade.getPexelsPhotos()), tap(_ => this.pexelsPhotosLoaded = false), tap(pexelsPhotos => { if(pexelsPhotos) { this.parsePexelsPhotos(pexelsPhotos); } }), takeUntil(this.ngUnsubscribe), delay(environment.production ? 2500 : 1000) ).subscribe(_ => { this.courseMediaItemsLoaded = true; this.pexelsPhotosLoaded = true; this.unsplashPhotosLoaded = true; }); }