Angular, ngrx data removed when fired dispatch event

user_8403632 0
Viewed 71

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.

1st stage

2nd stage

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;
}
ngrx angular dispatcher state-management
1 Answers

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