Как разрешить объект обещания

Question

Я хочу получить данные из службы, используемой ngrx / store, а затем получить объект обещания от редуктора, как разрешить отображение объекта обещания на веб-странице.

сервис

get(request){
  return this.httpClient.get<any>(uri).toPromise().then(res => <Node[]>res);
}

действие

getNodeData(name){
    return this.service.get(name);
}

редуктор

export function nodeReducre(
  state = initNode,
  action: Action
) {
  switch (action.type):
    case 'GetNode':
      state = action.getNodeData(name);
      return state;
    default:
      return initNode;
}

component.ts

node$: Observalbe<Node[]> = this.store.pipe(select('node'));

component.html

{{node$|async}}

Отображение [обещание объекта] на веб-странице.

демонстрация стекаблиц: https://stackblitz.com/edit/angular-yebobf

Answer 1

Вы пытаетесь работать с async действиями в ngrx. Async действия обрабатываются с помощью effects. Я обновил ветку вашего рабочего демо и внес некоторые изменения, используя эффекты. Я создал эффект как app-effect.ts в вашем образце. Обратите внимание на некоторые изменения, сделанные мной в app.component.ts, app.module.ts, app-reducer.ts, app-action.ts

@Injectable()
export class AppEffects {
  constructor(
    private actions$: Actions,
    public nodeSvc: DemoService
  ) {}

  @Effect()
  viewNodes$ = this.actions$
    .pipe(
      ofType(DemoActions.requestNodeAction),
      mergeMap((data) => {
        return this.nodeSvc.getObjectCallChain(data.payload)
        .pipe(
          map(data => ({ type: DemoActions.receivedNodeAction, payload: data })),
          catchError(() => EMPTY)
        )
      })
      )
}

Вы можете найти обновленный пример здесь

https://stackblitz.com/edit/angular-gni7vu

Также, вы можете детально изучить ngrx effects здесь

https://ngrx.io/guide/effects

Answer 2

Нельзя использовать асинхронный код в редукторе. Используйте для этого эффекты.

Краткий пример:

@Effect()
loadData$ = this.actions$.pipe(
    ofType('GetData'),
    map((action) => action.payload),
    switchMap((payload: any) =>
        this.service.get(payload)
            .pipe(
                map((data: any) => new SuccessAction(data)),
                catchError((error: any) => of(new FailureAction(error)))
            )
    )
);

Посмотрите на документы для более подробной информации.

Файл действия:

export class GetData implements Action {
     readonly type = 'GetData';

     constructor(public payload: any) {}
}