Angular 7 NGRX Store have undefined state - angular7

Question

My code is in Angular7, using #ngrx/store7, and sometimes I get undefined state (just for a specific state)
It is always the "history" state.
My App State:
export interface IAppState {
router?: RouterReducerState,
delivery: IDeliveryState,
events: IEventsState,
families: IFamiliesState,
googleDrive: IGoogleDriveState,
spinner: ISpinnerState,
user: IUserState,
volunteerConstraints: IVolunteerConstraintsState,
volunteers: IVolunteersState,
history: IHistoryState
}
export const initialAppState: IAppState = {
delivery: initialDeliveryState,
events: initialEventsState,
families: initialFamiliesState,
googleDrive: initialGoogleDriveState,
spinner: initialSpinnerState,
user: initialUserState,
volunteerConstraints: initialVolunteerConstraintsState,
volunteers: initialVolunteersState,
history: initialHistoryState
};
export function getInitialState(): IAppState {
return initialAppState;
}
My history state:
export interface IHistoryState {
familyHistory: Array<FamilyHistoryModel>;
familyHistoryPending: boolean;
routeHistory: Array<RouteHistoryModel>;
routeHistoryPending: boolean;
deliveryHistory: Array<DeliveryHistoryChartModel>;
volunteerRating: Array<VolunteerRatingModel>;
volunteerRatingPending: number;
initiated: boolean;
}
export const initialHistoryState: IHistoryState = {
familyHistory: new Array<FamilyHistoryModel>(),
familyHistoryPending: false,
routeHistory: new Array<RouteHistoryModel>(),
routeHistoryPending: false,
deliveryHistory: new Array<DeliveryHistoryChartModel>(),
volunteerRating: new Array<VolunteerRatingModel>(),
volunteerRatingPending: 0,
initiated: true
};
My History selector:
const selectHistoryState = (state: IAppState) => state.history;
export const selectFamilyHistory = createSelector(
selectHistoryState,
(state: IHistoryState) => state.familyHistory
);
export const selectFamilyHistoryPending = createSelector(
selectHistoryState,
(state: IHistoryState) => state.familyHistoryPending
);
export const selectRouteHistory = createSelector(
selectHistoryState,
(state: IHistoryState) => state.routeHistory
);
export const selectRouteHistoryPending = createSelector(
selectHistoryState,
(state: IHistoryState) => state.routeHistoryPending
);
export const selectDeliveryHistory = createSelector(
selectHistoryState,
(state: IHistoryState) => state.deliveryHistory
);
export const selectVolunteerRating = createSelector(
selectHistoryState,
(state: IHistoryState) => state.volunteerRating
);
export const selectVolunteerRatingPending = createSelector(
selectHistoryState,
(state: IHistoryState) => state.volunteerRatingPending
);
My app reducer:
export const appReducers: ActionReducerMap<IAppState, any> = {
router: routerReducer,
delivery: deliveryReducer,
events: eventsReducer,
families: familiesReducer,
googleDrive: googleDriveReducer,
spinner: spinnerReducer,
user: userReducer,
volunteerConstraints: volunteerConstraintsReducer,
volunteers: volunteersReducer,
history: historyReducer
}
My History reducer:
export function historyReducer(
state = initialHistoryState,
action: actions.HistoryActions): IHistoryState {
switch (action.type) {
case actions.HistoryActionTypes.Initiate:
return {
...state,
initiated: true
};
case actions.HistoryActionTypes.GetFamilyHistory:
return {
...state,
familyHistory: initialHistoryState.familyHistory,
familyHistoryPending:true
};
case actions.HistoryActionTypes.GetFamilyHistorySuccess:
return {
...state,
familyHistory: action.payload,
familyHistoryPending: false
};
case actions.HistoryActionTypes.GetFamilyHistoryFailure:
return {
...state,
familyHistoryPending: false
};
case actions.HistoryActionTypes.GetRouteHistory:
return {
...state,
routeHistory: initialHistoryState.routeHistory,
routeHistoryPending: true
};
case actions.HistoryActionTypes.GetRouteHistorySuccess:
return {
...state,
routeHistory: action.payload,
routeHistoryPending: false
};
case actions.HistoryActionTypes.GetRouteHistoryFailure:
return {
...state,
routeHistoryPending: false
};
case actions.HistoryActionTypes.GetDeliveryHistory:
return {
...state,
deliveryHistory: initialHistoryState.deliveryHistory
};
case actions.HistoryActionTypes.GetDeliveryHistorySuccess:
return {
...state,
deliveryHistory: action.payload
};
case actions.HistoryActionTypes.GetVolunteersRating:
return {
...state,
volunteerRating: initialHistoryState.volunteerRating,
volunteerRatingPending: state.volunteerRatingPending + 1
};
case actions.HistoryActionTypes.GetVolunteersRatingSuccess:
return {
...state,
volunteerRating: action.payload,
volunteerRatingPending: state.volunteerRatingPending - 1
};
case actions.HistoryActionTypes.GetVolunteersRatingFailure:
return {
...state,
volunteerRatingPending: state.volunteerRatingPending - 1 < 0 ? 0 :
state.volunteerRatingPending - 1
};
}
}
At the beginning the history state is undefined (as shown in the picture), and only after I dispatch an history action and change the state in the reducer, it gets initiated.
How do I fix that to be initiated at the beginning as all other states?
packge.json:
"dependencies": {
"#agm/core": "^1.0.0-beta.3",
"#agm/js-marker-clusterer": "^1.0.0-beta.3",
"#angular-mdl/core": "^6.0.1",
"#angular-mdl/datepicker": "^6.0.0",
"#angular-mdl/expansion-panel": "^6.0.0",
"#angular-mdl/popover": "^6.0.0",
"#angular-mdl/select": "^6.0.0",
"#angular/animations": "~7.1.0",
"#angular/cdk": "^7.2.2",
"#angular/common": "~7.1.0",
"#angular/compiler": "~7.1.0",
"#angular/core": "~7.1.0",
"#angular/forms": "~7.1.0",
"#angular/http": "^7.2.2",
"#angular/material": "^7.2.2",
"#angular/platform-browser": "~7.1.0",
"#angular/platform-browser-dynamic": "~7.1.0",
"#angular/router": "~7.1.0",
"#ngrx/effects": "^7.1.0",
"#ngrx/router-store": "^7.1.0",
"#ngrx/schematics": "^7.1.0",
"#ngrx/store": "^7.1.0",
"#ngrx/store-devtools": "^7.1.0",
"#ngx-translate/core": "^10.0.2",
"#ngx-translate/http-loader": "^3.0.1",
"#swimlane/ngx-charts": "^10.0.0",
"angular-2-local-storage": "^2.0.0",
"angular2-moment": "^1.9.0",
"angular2localization": "^1.4.2",
"aos": "^2.3.4",
"core-js": "^2.5.4",
"crypto-js": "^3.1.9-1",
"hammer-timejs": "^1.1.0",
"hammerjs": "^2.0.8",
"js-marker-clusterer": "^1.0.0",
"jssha": "^2.3.1",
"lodash": "^4.17.4",
"lodash-es": "^4.17.4",
"moment": "^2.20.1",
"ngrx-store-freeze": "^0.1.9",
"ngrx-store-localstorage": "^0.1.8",
"ngrx-store-logger": "^0.1.8",
"ngx-chips": "^1.4.5",
"ngx-device-detector": "^1.3.0",
"ngx-gallery": "^5.6.2",
"ngx-infinite-scroll": "^0.5.1",
"rxjs": "~6.3.3",
"rxjs-compat": "^6.0.0",
"sha.js": "^2.4.11",
"tslib": "^1.9.0",
"videogular2": "^6.3.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.11.0",
"#angular/cli": "~7.1.4",
"#angular/compiler-cli": "~7.1.0",
"#angular/language-service": "~7.1.0",
"#types/core-js": "^2.5.0",
"#types/googlemaps": "^3.30.16",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.1.6"
}

Answer 1

Looks to me like you are missing default case in your history reducer.
switch(...) {
case: ...
case: ...
default: {
return state;
}
}