嗨,我是ngrx存储的新手,我尝试了所有可能的情况,有一次我遇到了一个问题,当将数据从操作返回到状态时,即profileData:action.payload.profile。当我检查代码时,它在“ action.payload.profile”中显示数据,并且未绑定到profileData。当我在reduxdevtools中看到状态时,看到的是对象数据。 我确实尝试过多次更改状态对象,然后将直接初始化的状态从选择器发送到组件。请让我知道我在这里犯什么错误,我是从后端获取对象的。
减速器代码
export interface UserProfileState {
profileData: UserProfile | null;
}
export const initialUserProfileState: UserProfileState = {
profileData: null
};
export interface AppState {
userProfile: UserProfileState;
}
export function userProfileReducer(state = initialUserProfileState,
action
): UserProfileState {
switch (action.type) {
case types.GetUserProfileSuccess:
return {
...state,
profileData: action.payload.profile
};
default:
return state
}
}
export const reducers: ActionReducerMap<AppState> = {
userProfile: userProfileReducer
};
export const selectUserProfile = (state: AppState) =>
state.userProfile.profileData;
export const metaReducers: MetaReducer<any>[] = !environment.production ? []
:[];
export const getProfileDataState = createFeatureSelector<AppState>(
'userProfile',
);
export const getUserProfile = createSelector(
getProfileDataState,
selectUserProfile
);
组件代码
this.userProfiles$ = this.store.select(getUserProfile);
动作代码
export class GetUserProfilesRequested implements Action {
readonly type = types.GetUserProfileRequested;
constructor(readonly payload: {
userEmail: string
}) { }
}
export class GetUserProfilesSuccess implements Action {
readonly type = types.GetUserProfileSuccess;
constructor(readonly payload: { profile: UserProfile }) { }
}
export type Actions =
| GetUserProfilesRequested
| GetUserProfilesSuccess
effects code
userProfileList$ = this.actions$.pipe(
ofType<UserProfileActions.GetUserProfilesRequested>(
types.GetUserProfileRequested
),
mergeMap(action =>
this.mainService
.GetLoginUserProfile(action.payload.userEmail)
.pipe(
map(
profile =>
new UserProfileActions.GetUserProfilesSuccess({ profile })
)
)
)
);