Angular, ngrx data removed when fired dispatch event

Question

I have 2 API calls for data fetching and 2 dispatch events for the data store in ngrx store.

The problem is When I call the first FETCH_FINANCIAL_INSTITUTION dispatcher and 2nd FETCH_USER_GROUPS dispatcher, institutions are removed. See the below screenshots.

See below my implementations,

1. For Institutes,

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

2. For user groups,

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

Here are the reducers,

1. Institute reducer

    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. User group 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}};
       }
     }
   

root reducer,

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

question from:https://stackoverflow.com/questions/65898244/angular-ngrx-data-removed-when-fired-dispatch-event

Answer 1

Finally, I solved my problem. Ill post it here and it will help someone.

The problem is that in my Reducer function the default in the switch case returning the initialState instead of returning the state. After adding default to the switch case problem solved.

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