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

Question

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

问题是当我调用第一个 FETCH_FINANCIAL_INSTITUTION 调度程序和第二个 FETCH_USER_GROUPS 调度程序时，机构是删除。请参阅下面的屏幕截图。

查看下面我的实现，

对于学院，

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

对于用户组，

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

这是减速器，

研究所减速机

 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}};
          }
 }

用户组reducer

  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;
}

Answer 1

终于，我解决了我的问题。我 post 在这里，它会对某人有所帮助。

问题是在我的 Reducer 函数中，switch case 中的默认值返回 initialState 而不是返回状态。添加 default 到 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
        }
 }

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

Angular, ngrx data removed when fired dispatch event

angular

ngrx

dispatcher

state-management