Question

我想从使用过ngrx / store的服务中获取数据，然后比从reducer获取一个Promise对象，如何解析Promise对象以显示在网页上。

服务

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

在网页上显示“ [对象承诺]”。

stackblitz演示：https://stackblitz.com/edit/angular-yebobf

Answer 1

您不能在reducer中使用异步代码。为此使用效果。

简短示例：

@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)))
            )
    )
);

查看docs以获得更多详细信息。

动作文件：

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

     constructor(public payload: any) {}
}

Answer 2

您正在尝试使用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

如何解决承诺对象

2 个答案: