Angular 使用dispatch和subscribe调用Webservice两次

我不明白为什么我的createaccountapi被调用了两次。当我删除构造函数部分时，api会被调用一次，但我需要获得帐户创建的成功

在以下配置中，我有一个两次调用的webservice：

public onSubmit（）{
this.submitted=true；
//如果表单无效，请在此停止
if（this.registerForm.invalid）{
返回；
}
这是我的商店(
userAction.userCreateRequest({
数据：this.registerForm.value，
})
);
}

在我的

构造函数中

我正在寻找成功：

构造函数(
私家店，
私有formBuilder:formBuilder，
专用路由：激活的路由，
私有userEffects:userEffects，
专用modalService:NgbModal，
私人消毒剂：多姆消毒剂，
专用用户服务：用户服务）{
this.loading$=store.select（fromRoot.getUserLoading）；
this.userEffects.create$
.pipe（ofType（UserTypes.USER\u CREATE\u SUCCESS））
.订阅（（res）=>{
console.log（“成功测试”）；
});
}

effect.ts

具有以下定义：

create$=createEffect（（）=>
此.actions$管道(
ofType（用户类型。用户创建请求），
排气图（（动作）=>{
const{data}=动作；
返回此.userService.create（数据为UserActions.UserInfosData）.pipe(
map（（user）=>UserActions.userCreateSuccess（{user}）），
catchError（（错误）=>
of（UserActions.userCreateFailure（{error}））
)
);
})
)
);

行动.ts：

//创建用户
export const userCreateRequest=createAction(
UserTypes.USER\u创建请求，
道具（）
);
export const userCreateSuccess=createAction(
UserTypes.USER_创建_成功，
道具（）
);
export const userCreateFailure=createAction(
UserTypes.USER\u创建\u失败，
道具（）
);

你。应该不订阅到效果

真的

如果您需要在用户_CREATE _SUCCESS上执行某些操作，请在

CREATE$

效果、其他效果或减缩器中执行

---

在你的回答中

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

应该深入效果（如果可能的话，至少我会把它放在那里）来保持它干净。如果不可能，您可以将其留在组件中

---

最基本的是，特效会自动订阅（在模块中注册时），不应在其他任何地方订阅，因为这会导致您的问题。正如您已经发现的，您可以使用listen-to-dispatched actions，因为actions是沟通效果的手段。

我有我的答案（请比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);
  }

构造函数(
私家店，
私有formBuilder:formBuilder，
专用路由：激活的路由，
专用modalService:NgbModal，
私有用户服务：用户服务，
私有操作$：操作，
) {
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\u CREATE\u SUCCESS））
.订阅（（res）=>{
控制台日志（“成功”）；
//this.open（this.alertModal，“模态自定义警报模态”）；
});
this.CertInProducts$=store.select（fromRoot.GetAppCertInProducts）；
}

“认真地”谢谢，但我不明白你的答案。这是我的reducer.ts:

on（UserActions.userCreateSuccess，（state，{user}）=>（{…state，load:false，user，error:null，}）），

根据您的答案展开了答案。