Question

ngrx effect dispatch 动作错误，传递动作有效负载时为空

2018-03-14

7738

angular httpclient ngrx ngrx-effects

如果最终帖子成功，我有此效果，它会分派一个虚拟操作。

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

但有 2 件事情是错误的：

我收到此错误：错误错误：效果“PropertyEffects.post$”分派了一个无效操作：未定义 core.js:1427 错误 TypeError：操作必须是对象此错误是在越过最内层帖子后在控制台中生成的：this.httpClient.post(res.toString(), this.actionData)。另请注意，内部 console.log 从未被命中
我试图将第一个回调的 action.payload 传递到最内层帖子，但得到 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 传递到最内层的帖子？提前感谢您的帮助！我是 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

在原始问题中，

最内层的帖子： 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);
});