Webservice 調用兩次使用 dispatch 和 subscribe Angular 9

Question

我不明白為什么我的創建帳戶 api 被調用兩次。 當我刪除構造函數部分時，api 被調用一次，但我需要讓我的帳戶創建成功。

當我處於以下配置時，我有兩次調用 web 服務：

public onSubmit() {
    this.submitted = true;
    // stop here if form is invalid
    if (this.registerForm.invalid) {
      return;
    }
    this.store.dispatch(
      userAction.userCreateRequest({
        data: this.registerForm.value,
      })
    );
  }

在我的constructor中，我正在尋找成功：

constructor(
    private store: Store<fromRoot.State>,
    private formBuilder: FormBuilder,
    private route: ActivatedRoute,
    private userEffects: UserEffects,
    private modalService: NgbModal,
    private sanitizer: DomSanitizer,
    private userService: UserService ) {
  this.loading$ = store.select(fromRoot.getUserLoading);
  this.userEffects.create$
  .pipe(ofType(UserTypes.USER_CREATE_SUCCESS))
  .subscribe((res) => {
    console.log("SUCCESSS TEST");
  });
}

effect.ts具有以下定義：

create$ = createEffect(() =>
  this.actions$.pipe(
    ofType(UserTypes.USER_CREATE_REQUEST),
    exhaustMap((action) => {
      const { data } = action;
      return this.userService.create(data as UserActions.UserInfosData).pipe(
        map((user) => UserActions.userCreateSuccess({ user })),
        catchError((error) =>
          of(UserActions.userCreateFailure({ error }))
        )
      );
    })
  )
);

動作.ts：

// create User
export const userCreateRequest = createAction(
  UserTypes.USER_CREATE_REQUEST,
  props<{ data: UserInfosData }>()
);
export const userCreateSuccess = createAction(
  UserTypes.USER_CREATE_SUCCESS,
  props<{ user: any }>()
);
export const userCreateFailure = createAction(
  UserTypes.USER_CREATE_FAILURE,
  props<{ error: any }>()
);

Answer 1

你。 應該。 不是。 訂閱。 至。 效果。

嚴重地。

如果您需要在 USER_CREATE_SUCCESS 上完成某些操作，您可以在create$效果、另一個效果或減速器中進行。

---

在你的回答中

this.actions$.pipe(ofType(UserTypes.USER_CREATE_SUCCESS))
  .subscribe((res) => {
    console.log("SUCCESSS");
    // this.open(this.alertModal, 'modal-custom alert-modal');
  });

應該將 go 放入效果中（至少如果可能的話，我會把它放在那里）以保持清潔。 如果不可能，您可以將其留在組件中。

---

基本的是效果會自動訂閱（在模塊中注冊它們時）並且不應該在其他任何地方訂閱它們，因為這會導致您的問題。 正如您已經發現的那樣，您可以使用偵聽調度的動作，因為動作是溝通效果的手段。

Answer 2

我有我的答案（請對 Angular 初學者比 Kvetis 更寬容）：

我必須在構造函數中導入操作並訂閱成功操作：

constructor(
    private store: Store<fromRoot.State>,
    private formBuilder: FormBuilder,
    private route: ActivatedRoute,
    private modalService: NgbModal,
    private userService: UserService,
    private actions$: Actions,
  ) {
    this.loading$ = store.select(fromRoot.getUserLoading);
    this.specificDiets$ = store.select(fromRoot.getAppSpecificDiets);
    // this.foods$ = store.select(fromRoot.getAppFoods);
    this.foodGroups$ = store.select(fromRoot.getAppFoodGroups);
    this.physicalActivities$ = store.select(fromRoot.getAppPhysicalActivities);
    this.foodHabits$ = store.select(fromRoot.getAppFoodHabits);
    this.actions$.pipe(ofType(UserTypes.USER_CREATE_SUCCESS))
      .subscribe((res) => {
        console.log("SUCCESSS");
        // this.open(this.alertModal, 'modal-custom alert-modal');
      });
    this.vitrineProducts$ = store.select(fromRoot.getAppVitrineProducts);
  }