【发布时间】：2021-03-01 03:28:14
【问题描述】：
我正在尝试向 ngrx-store 发出顺序请求，以将两个不同的实体保存在两个随机 mongodb 集合中，并且需要从第一个 ngrx-store 效果中获得答案，以便在创建引用第一个实体时使用另一个中的数据.
我有什么：
减速器
export interface UserState {
currentUser: IUser | null;
checkUserResult: any | null;
user: IUser | null;
users: IUser[] | null;
errorMessage: string | null;
isLoading: boolean;
isLoaded: boolean;
isError: boolean;
}
export function userReducer(
state = initialUserState,
action: fromUser.UserActions
): UserState {
switch (action.type) {
case fromUser.USER_CREATE: {
return {
...state,
isLoading: true,
};
}
case fromUser.USER_CREATE_SUCCESS: {
return {
...state,
user: {
_id: action.user._id,
userLogin: action.user.userLogin,
userPassword: action.user.userPassword,
userEmail: action.user.userEmail,
userPhone: action.user.userPhone,
userRole: action.user.userRole,
userType: action.user.userType,
userRef: action.user.userRef,
},
checkUserResult: null,
errorMessage: null,
isLoading: false,
isLoaded: true,
isError: false,
};
}
case fromUser.USER_CREATE_FAILURE: {
return {
...state,
errorMessage: "Can not create user",
isError: true,
};
}
[...]
}
动作
export class UserCreate implements Action {
readonly type = USER_CREATE;
constructor(public payload: IUser) {}
}
export class UserCreateSuccess implements Action {
readonly type = USER_CREATE_SUCCESS;
constructor(public user: IUser) {}
}
export class UserCreateFailure implements Action {
readonly type = USER_CREATE_FAILURE;
constructor(public error: string) {}
}
效果
@Effect()
createUser$: Observable<Action> = this.action$.pipe(
ofType(UserActions.USER_CREATE),
map((action: UserActions.UserCreate) => action.payload),
exhaustMap((payload) => {
return this.userDataService.createUser(payload).pipe(
map((data) => {
return new UserActions.UserCreateSuccess(data);
}),
catchError((err) => of(new UserActions.UserCreateFailure(err)))
);
})
);
选择器
export const getUserState = createSelector(
fromFeature.getAppState,
(state: fromFeature.AppState) => state.users
);
和服务
createUser(user: IUser) {
this.store.dispatch(new fromStore.UserCreate(user));
return this.store.select(fromStore.getUserState);
}
以及另一个服务（user-data.service.ts），其方法从效果调用
createUser(user: IUser): Observable<IUser> {
const url = `${this.BASE_URL}/user/create`;
return this.http.post<IUser>(url, { ...user });
}
当我只从组件创建一个实体时，所有这些设置都有效
user-create.component.ts
onCreateUser() {
this.us
.createUser({
userLogin: this.createUserForm.value.userLogin,
userPhone: this.createUserForm.value.userPhone,
userEmail: this.createUserForm.value.userEmail,
userPassword: this.createUserForm.value.userPassword,
userRole: this.createUserForm.value.userRole,
userRef: this.createUserForm.value.userRef,
userType: this.createUserForm.value.userType,
})
.subscribe((user) => {
if (user) {
this.createUserForm.reset();
this.router.navigate(["/users"]);
this.us.getUsersList();
}
});
}
创建不同实体的其他逻辑与上面列出的相同。当我尝试在这样的组件内调用 action inside 时
this.us
.createUser({
userLogin: this.createContactUserForm.value.userPhone,
userPhone: this.createContactUserForm.value.userPhone,
userEmail: this.createContactUserForm.value.userEmail,
userPassword: this.createContactUserForm.value.userPassword,
userRole: this.createContactUserForm.value.userRole,
userRef: this.createContactUserForm.value.userRef,
userType: this.createContactUserForm.value.userType,
})
.subscribe((userState) => {
if (userState.user) {
this.cs
.createContact({
contactFirstName: this.createContactUserForm.value
.contactFirstName,
contactLastName: this.createContactUserForm.value.contactLastName,
contactPatronymicName: this.createContactUserForm.value
.contactPatronymicName,
contactPhone: this.createContactUserForm.value.userPhone,
contactUserId: userState.user._id,
})
.subscribe((contactState) => {
if (contactState) {
this.router.navigate(["/contacts"]);
}
});
}
});
它按预期工作，但后来，当我尝试进行任何其他操作时 - 它破坏了应用程序状态。例如，我不能在它之后编辑或删除联系人。 另一方面，如果我将逻辑拆分为两个独立的调用 - 它不会起作用，因为在 createContact 方法调用的那一刻 - 应用程序还不知道 createdUser _id 或 userState.user._id 并引发错误。
我认为，这里一定是一个更复杂的逻辑，但如何使它正确 - 我不知道。请建议我执行此操作的正确方法。
提前致谢。
【问题讨论】：
标签： angular typescript rxjs ngrx