Магазин NGRX не заполнен - PullRequest
Новая
       2

Магазин NGRX не заполнен

0 голосов
/ 22 января 2020

Я пытаюсь заполнить хранилище ngrx данными, запрашиваемыми из API и отформатированными следующим кодом

Служба API 

getMaterialImagesByMaterialId(id: string){
    const images: Array<MaterialImage> = new Array<MaterialImage>();
    this.getImageData(id)
      .pipe(
        pluck('value')
      )
      .subscribe(data => {
        const postBody = Array<PostBodyItem>();
          for(const img of data) {
            postBody.push({ItemType: "Image", ItemId: img.ImageId});
          }
          this.getImageMedia(postBody).subscribe(media => {
            for(let i = 0; i < media.length; i++) {
              const image: MaterialImage = {
                id: data[i].ImageId,
                createdBy: data[i].AliasUser.FirstName + " " + data[i].AliasUser.LastName,
                title: media[i].Title,
                description: data[i].Description,
                timestamp: data[i].SmpteTime,
                url: media[i].StreamingUrl,
                output: 'FOOBAR'
              };
               images.push(image);
            }
          });
      }
    );
    console.log(images);
    return images;
  }

  private getImageData(id: string) {
    const url = `...`;
    const headers = new HttpHeaders().set('UseBasicAuth', 'true');
    return this.http.get<MaterialImageResponse>(url, {headers})
      .pipe(
        switchMap(data => {
          this.loggerService.log(`Retrieved ${this.entityName}`);
          return of(data);
        }),
        catchError(error => this.handleError(`Retrieving ${this.entityName} Failed`, error))
      );
  }

  private getImageMedia(body: Array<PostBodyItem>){
    const url = '...';
    const headers = new HttpHeaders().set('UseBasicAuth', 'true');
    return this.http.post(url, body, {headers})
      .pipe(
        switchMap(data => {
          this.loggerService.log(`Retrieved ${this.entityName}`);
          return of(data);
        }),
        catchError(error => this.handleError(`Retrieving ${this.entityName} Failed`, error))
      );
  }

image.effect 

@Injectable()
export class MaterialImagesEffects {
  constructor(private materialImagesActions$: Actions, private api$: MaterialImageResource)
  {}

  load$: Observable<Action> = createEffect(() =>
    this.materialImagesActions$.pipe(
      ofType(materialImagesActions.LOAD_IMAGES),
      switchMap(action => {
        return [
          materialImagesActions.LOAD_IMAGES_SUCCESS({
            materialImages:this.api$.getMaterialImagesByMaterialId(action.materialId.toString())
          })
        ];
      })
    )
  );
}

У кого-нибудь есть понимание того, почему LOAD_IMAGE_SUCCESS будет запускать, но не заполнять хранилище сгенерированным содержимым?

Я думаю, что существует некоторая форма состояния гонки, так что если это так, как бы Я исправлю это?

1 Ответ

0 голосов
/ 22 января 2020

Вы никогда не должны менять магазин с эффектом. Всегда вызывайте действие, которое запускает эффект, который вызывает вашу Службу для получения данных, и после этого вы должны запускать действие LOAD_IMAGES_SUCCESS в вашем эффекте. Редуктор должен прослушать это SUCCESS действие и изменить ваш магазин. Посмотрите на этот прекрасный пример с действием / эффектом / редуктором / магазином:

https://www.intertech.com/Blog/ngrx-tutorial-actions-reducers-and-effects/

Если вы будете следовать ему, вам будет легко понять концепцию.

...