How to resolve the promise object

Question

I want to get data from service used ngrx/store, and than I get a promise object from reducer, how to resolve the promise object to display on web page.

service

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

action

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

reducer

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}}

Display '[object Promise]' at webpage.

stackblitz demo: https://stackblitz.com/edit/angular-yebobf

Answer 1

You are trying to working with async actions in ngrx. Async actions are handled using the effects. I have updated forked your working demo and did some changes using effects. I created an effect as app-effect.ts in your sample. Observe some changes done by me in 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)
        )
      })
      )
}

You can find the updated example here

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

Also, you can study in details about ngrx effects here

https://ngrx.io/guide/effects