触发调度事件时删除 Angular、ngrx 数据

如何解决触发调度事件时删除 Angular、ngrx 数据

我有 2 个用于数据获取的 API 调用和 2 个用于 ngrx 存储中的数据存储的调度事件。

问题是当我呼叫第一个 FETCH_FINANCIAL_INSTITUTION 调度员和第二个 FETCH_USER_GROUPS 调度员时，机构被移除。请参阅以下屏幕截图。

见下面我的实现，

1. 对于研究所，

   this.store.dispatch({
          type: Action.FETCH_FINANCIAL_INSTITUTION,payload: <IFinancialInstitution[]> institutions,});
   

2. 对于用户组，

   this.store.dispatch({
      type: Action.FETCH_USER_GROUPS,payload: <IUserGroup[]> userGroups,});
   

这里是减速器，

1. 研究所减速器

    export interface IFinancialInstitutionState {
      institutes: IFinancialInstitution[];
    }
   
    export class FinancialInstitutionState implements 
      IFinancialInstitutionState {
        institutes: IFinancialInstitution[] = [];
    }
   
    export function FinancialInstitutionReducer(
        state: IFinancialInstitutionState = new FinancialInstitutionState(),action) {
             switch (action.type) {
                 case Action.FETCH_FINANCIAL_INSTITUTION:
                     return {...state,...{institutes : action.payload}};
             }
    }
   

2. 用户组缩减器

     export interface IUserGroupState {
       userGroup: IUserGroup[];
     }
   
     export class UserGroupState implements IUserGroupState {
           userGroup: IUserGroup[] = [];
     }
   
     export function UserGroupReducer (
           state: IUserGroupState = new UserGroupState(),action,) {
         switch (action.type) {
                 case Action.FETCH_USER_GROUPS :
                 return {...state,...{userGroup : action.payload}};
       }
     }
   

根减速器，

export const rootReduces = {
  authData : AuthReducer,usersData : UsersReducer,systemData : SystemReducer,institutesData : FinancialInstitutionReducer,userGroupData : UserGroupReducer,};

AppState.ts

export interface AppState {
  readonly authData: IAuthResult[];
  readonly usersData: UserState;
  readonly systemData: SystemConfigs;
  readonly institutesData: IFinancialInstitutionState;
  readonly userGroupData: IUserGroupState;
}

解决方法

最后，我解决了我的问题。我会把它贴在这里，它会帮助别人。

问题是在我的 Reducer 函数中，switch case 中的默认值返回 initialState 而不是返回状态。将默认添加到 switch case 后问题解决了。

export function FinancialInstitutionReducer(
   state: IFinancialInstitutionState = new FinancialInstitutionState(),action) {
        switch (action.type) {
           case Action.FETCH_FINANCIAL_INSTITUTION:
                  return {...state,...{institutes : action.payload}};
           default:
                  return state; // this is added line
        }
 }