ngrx effect dispatch action error and null 传递动作负载时

Question

如果最后的 post 成功，我有这个效果调度一个虚拟动作。

@Effect() post$: Observable<Action> = this.actions$
        .ofType(PropertyActions.UPLOAD_FILE_GETSIGNEDURL)
        .switchMap((action: PropertyActions.UploadFileGetsignedUrl) => {
            this.actionData = action.payload;
            return this.authService.getAuthenticatedUser().getSession((err, session) => {
                if (err) {
                return;
                }

                // post to API gateway
                return this.httpClient.post('https://abcd.execute-api.us-east-1.amazonaws.com/dev/', {
                    title: 'foo',
                    body: 'bar',
                    userId: 1
                    })
                    .pipe(map(res => {
                            console.log("res from signed url: " + res);
                            this.httpClient.post(res.toString(), this.actionData)
                            .pipe(map(res => {
                                console.log("res from upload: " + res);
                                return new PropertyActions.OpenAllProperties(res);
                            }))
                            //return new PropertyActions.OpenAllProperties(res);
                        },
                        err => {
                            console.log("Error occured");
                            return new PropertyActions.OpenAllProperties(null);
                        })
                    );
                }
            )
        }
    )

但是有两处错误：

我收到此错误：错误错误：效果 "PropertyEffects.post$" 调度无效操作：未定义 core.js:1427 错误类型错误：操作必须是对象在越过最里面的 post 之后在控制台中生成此错误：this.httpClient.post(res.toString(), this.actionData)。还要注意内部 console.log 永远不会被击中
我试图将第一个回调的 action.payload 传递到最里面的 post 但得到 null。 this.actionData 是我设置的组件的一个变量：

@Injectable()
export class PropertyEffects {

    private actionData: string;

    constructor(
        private actions$: Actions,
        private httpClient: HttpClient,
        private store: Store<fromApp.AppState>,
        private authService: AuthService
    ){}

    @Effect() post$: Observable<Action> = this.actions$
    ...

如何把action.payload传到最里面的post？预先感谢您的帮助！我是 Angular 和 Rxjs 的新手，感谢您的宝贵时间。

Answer 1

你不应该以这种不利于测试和重用的方式使你的效果混乱，尝试删除对服务的 HTTP 调用并注入然后在你的效果中使用它。假设您像这样将它放在 MyHttpService 中

@Injectable()
export class MyHttpService {
  constructor(private http: HttpClient) {
  }        

  addItem(payload: AddItemPayload): Observable<AddItemSuccessPayload> {  
    return this.http.post<AddItemSuccessPayload>('/api/items/' + payload.id, payload.Data).pipe(
      map((data) => {
        return {item: data.item};
      })
    );
  }
}

现在我们将它注入效果并传递 action.payload 到内部服务，如果错误或成功，我们将它分派给其他效果

 @Injectable()
 export class VendorEffect {

  @Effect() 
  addItem$ = this.actions$.pipe(
    ofType(Vendor.ActionType.ADD_ITEM),
    map((action: Vendor.AddItem) => action.payload),
    exhaustMap((request) =>
      this.myHttpService.addItem(request).pipe(
        map(payload => new Vendor.AddItemSuccess(payload)),
        catchError(err => of(new Vendor.AddItemFail(err)))
      )
    )
  );


      constructor(private actions$: Actions, private myHttpService: MyHttpService) {
      }

    }

就是这样，这是现在使用带有 ofType 的管道的 ngrx 使用的方法

Answer 2

原题中，

最里面的 post：this.httpClient.post(res.toString(), this.actionData) 可能返回 undefined 或为空。 Angular Effect 希望您通过返回操作来处理此类情况。您可以这样做：

return new ErrorAction({msg: "Data could not be loaded"})

在你的 ErrorAction:

export class ErrorAction implements Action {
    readonly type = ActionTypes.ErrorAction;
    msg: String;
    constructor(error: any) {
        this.msg = error.msg;
    }
}

然后，最后订阅 ErrorAction 类型并显示错误信息。您可以按如下方式使用 NotificationsService：

this.actions.pipe(ofType(ActionType.ErrorAction)).subscribe((error: any) => {
    this.notificationService.error(error.msg);
});

ngrx effect dispatch action error and null 传递动作负载时

ngrx effect dispatch action error and null when passing action payload

angular

httpclient

ngrx

ngrx-effects