Angular2/ngrx 和 API 调用

Question

我最近一直在探索 ngrx (ngrx/store)。我研究了网上的一些经典示例（一个待办事项应用程序）。很好的例子。现在我想通过让我的 ngrx 应用程序执行一些 API 调用来将它提升到一个新的水平。是否有示例或指南如何设置 ngrx (redux) 应用程序来调用和处理 api 调用？

据我了解，api 在我的 redux 应用程序上下文中的调用是副作用（函数式编程范例）。我想 how/where 在 redux 应用程序中实现 API 调用。

Answer 1

Ngrx 有自己的副作用库 ngrx/effects 更多信息：

简介：https://github.com/ngrx/effects/blob/master/docs/intro.md
教程：

关于这个库的资源不多。您可以在这里找到更多信息：

https://gitter.im/ngrx/store?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge

Answer 2

为什么会有副作用？因为 ngrx 说你的 reducer 应该是纯函数，你不能在 reducer 中使用 API 异步调用。你的减速器是做什么的？ -> 它会更新您的状态并 return 更新状态。那么如何在 reducer 中制作 API 呢？ -> 为了实现这一点，ngrx 在@ngrx/effect.

中提供效果

就像 reducer 有 switch case 到确定的动作，所以 effect 也会订阅所有的动作，它会监听所有的动作。

如何将Effect识别为action？ -->

就像减速器一样 -

export function reducer(state = initialState, action: myActions.Actions) {
  switch (action.type) {    
    case myActions.actionType.SEND_CANDIDATE_OTP: {      
      return Object.assign({}, state, {otp:'test'});
    }
}

效果会像->

    export class CandidateEffect {
      @Effect()
      sendCandidateOTP$: Observable<Action> = this.action$
        .ofType(myActions.actionType.SEND_CANDIDATE_OTP)
        .pipe(
          switchMap((action: myActions.GetCandidateAction) => {
            const input: myModel.GetCandidateInput = action.payload;
            return this.candidateService.SendCandidateOTP(input).pipe(
              map(resp => {
                return new myActions.SendCandidateOTPSuccessAction(resp);
              }),
              catchError((err, caught) => {
                return of(new myActions.SendCandidateOTPFailAction(err));
              })
            );
          })
        );
}

在上面的代码中，您将使用来自 ngrx 的 typeOf 关键字来识别操作。

Angular2/ngrx 和 API 调用

Angular2 / ngrx and API calls

ngrx

angular