在其他操作成功时分派一个操作

Question

我对棱角分明的redux世界很陌生。我想我有一个常见的问题，但我找不到正确的答案，或者我只需要一个有用的提示。我在我的应用程序中使用ngrx，我想更新用户的一些基本数据。然后我想重新加载用户的数据。

简而言之(1( 更新用户数据(2( 加载用户数据(3( 在前端中可视化

如果我先调度更新，然后加载数据，它并不总是有效的。我已经了解到调度器运行异步，因此不能说哪一个将首先完成。

我的想法。我必须(1(用promise更新用户数据，然后(2(加载并显示用户数据。还是我错了？

感谢您的帮助

---

这是我的代码

currenUser.effects.ts

[...]
@Injectable()
export class CurrentUserEffects {
constructor(
private actions$: Actions,
private currentUserService: CurrentUserService
) {}
@Effect()
loadCurrentUser$ = this.actions$.pipe(
ofType(ActionTypes.LoadCurrentUser),
mergeMap((action: LoadCurrentUserAction) =>
this.currentUserService
.getCurrentUserNew()
.pipe(
map(
(currentUser: CurrentUserNew) => new LoadCurrentUserActionFinished(currentUser)
)
)
)
);
@Effect()
updateCurrentUser$ = this.actions$.pipe(
ofType(ActionTypes.UpdateCurrentUser),
switchMap((action: UpdateCurrentUserAction) =>
// update
this.currentUserService
.updateCurrentUser(action.oldCurrentuser, action.newCurrentUser)
.then(
response => {
return new UpdateCurrentUserActionFinished(response);
}
)
// here relaod data?
)
);
}

currentUser.actions.ts

import { CurrentUserNew } from './../../models/currentUserNew';
import { Action } from '@ngrx/store';
export enum ActionTypes {
LoadCurrentUser = '[CurrentUser] Load current user',
LoadCurrentUserFinished = '[CurrentUser] Load current user finished',
UpdateCurrentUser = '[CurrentUser] Update current user',
UpdateCurrentUserFinished = '[CurrentUser] Update current user finished',
}
export class LoadCurrentUserAction implements Action {
readonly type = ActionTypes.LoadCurrentUser;
}
export class LoadCurrentUserActionFinished implements Action {
readonly type = ActionTypes.LoadCurrentUserFinished;
constructor(public payload: CurrentUserNew) {}
}
export class UpdateCurrentUserAction implements Action {
readonly type = ActionTypes.UpdateCurrentUser;
constructor(
public oldCurrentuser: CurrentUserNew,
public newCurrentUser: CurrentUserNew
) {}
}
export class UpdateCurrentUserActionFinished implements Action {
readonly type = ActionTypes.UpdateCurrentUserFinished;
constructor(public payload: boolean) {}
}
export type CurrentUserActions =
| LoadCurrentUserAction
| LoadCurrentUserActionFinished
| UpdateCurrentUserAction
| UpdateCurrentUserActionFinished;

currentUser.reducer.ts

import { CurrentUserNew } from './../../models/currentUserNew';
import { CurrentUserActions, ActionTypes } from './currentUser.actions';
export interface ReducerCurrentUserState{
currentUser: CurrentUserNew;
isUpdated: boolean;
}
export const initialState: ReducerCurrentUserState = {
currentUser: null,
isUpdated: false
};
export function currentUserReducer(
state = initialState,
action: CurrentUserActions
): ReducerCurrentUserState {

switch (action.type) {
case ActionTypes.LoadCurrentUser: {
return {
...state,
};
}
case ActionTypes.LoadCurrentUserFinished: {
return {
...state,
currentUser: action.payload,
};
}
case ActionTypes.UpdateCurrentUser: {
return {
...state,
};
}
case ActionTypes.UpdateCurrentUserFinished: {
return {
...state,
isUpdated: action.payload,
};
}
default:
return state;
}
}

currentUser.selectors.ts

import { ReducerCurrentUserState, currentUserReducer } from './currentUser.reducer';
import { ActionReducerMap, createFeatureSelector, createSelector } from '@ngrx/store';
export const currentUserFeatureStateName = 'currentUserFeature';
export interface CurrentUserState {
currentUser: ReducerCurrentUserState;
}
export const currentUserReducers: ActionReducerMap<CurrentUserState> = {
currentUser: currentUserReducer,
};
// extract the main property from the state object
export const getCurrentUserFeatureState = createFeatureSelector<CurrentUserState>(
currentUserFeatureStateName
);
export const getCurrentUser = createSelector(
getCurrentUserFeatureState,
(state: CurrentUserState) => state.currentUser.currentUser
)
export const isCurrentUserUpdatedSuccessful = createSelector(
getCurrentUserFeatureState,
(state: CurrentUserState) => state.currentUser.isUpdated
)

Answer 1

起初，我试图调用双效

@Effect()
updateAndLoadCurrentUser$ = this.actions$.pipe(
ofType(ActionTypes.UpdateAndLoadCurrentUser),
switchMap((action: UpdateCurrentUserAction) =>
of(
new UpdateCurrentUserAction(action.oldCurrentuser, action.newCurrentUser),
new LoadCurrentUserAction(),
new UpdateAndLoadCurrentUserActionFinished()
)
)
);

这是一个动作值得我异步回答的问题。

我的解决方案：

实际上，我的解决方案是采取一种行动。该操作会向后端调用http请求，后端会为我提供正确的对象。

然而，我现在感兴趣的是如何触发两个接一个的动作。不幸的是，我还没有找到这个的解决方案