ionic2 - Setting variable to some value if server response is undefiend in Angular 2 -

i'm using angular 2 in combination redux (ngrx: reducers , effects) , total beginner in both of them must use them. have request server , if there no values need set them default value. have activity , images. activity when last motion and/or message have happened , images links images.

here code effects:

    @effect() getactivity$ = this.actions$       .oftype(dashboardactions.get_activity)       .withlatestfrom(this.store, (action, state) => ({         senior: state.senior.globalsenior.id,         date: action.payload       }))       .switchmap((options) => {         return this.dashboardservice.getactivity({           id: options.senior,           date: options.date         })         .map((res) => ({ type: dashboardactions.get_activity_success, payload: res }))         .catch(() => observable.of({ type: dashboardactions.get_activity_error }))       })      @effect() getimages$ = this.actions$       .oftype(dashboardactions.get_images)       .withlatestfrom(this.store, (action, state) => ({         senior: state.senior.globalsenior.id,         date: action.payload       }))       .switchmap((options) => {         return this.dashboardservice.getimages({           id: options.senior,           date: options.date         })           .map((res) => ({ type: dashboardactions.get_images_success, payload: res }))           .catch(() => observable.of({ type: dashboardactions.get_images_error }))       }) 

here code reducer:

    export interface state {       activity: any,       images:     }      const initialstate: state = {       activity: null,       images: null     }      export function reducer (state = initialstate, action: action): state {       switch (action.type) {         case dashboardactions.get_activity_success:           return object.assign({}, state, {             activity: action.payload           })          case dashboardactions.get_images_success:           return object.assign({}, state, {             images: action.payload           })          default:           return state       }     } 

here i'm using in html (component) template:

        <ion-grid class="dashboard-table">             <ion-row>               <ion-col *ngfor="let message of (activity$ | async)?.data[0]" text-center no-padding>                 <span [ngclass]="{'dot-message dot-message--big':(message === 1)}" *ngif="message"></span>                 <span [ngclass]="{'dot-message':(message !== 1)}" *ngif="!message"></span>               </ion-col>             </ion-row>             <ion-row>               <ion-col *ngfor="let motion of (activity$ | async)?.data[1]" text-center no-padding>                 <span [ngclass]="{'dot-motion dot-motion--big':(motion === 1)}" *ngif="motion"></span>                 <span [ngclass]="{'dot-motion':(motion !== 1)}" *ngif="!motion"></span>               </ion-col>               <ion-col col-6 *ngfor="let image of (images$ | async)" no-padding class="images__col">                 <img (click)="onlittleimageclick(image.data)" [src]="image?.data" />                 <span class="images__time">{{ (activity$ | async)?.last_motion_time | date:'h:mm:a' }}</span>               </ion-col>             </ion-row>         </ion-grid>       constructor (        public navctrl: navcontroller,        public modalctrl: modalcontroller,        private store: store<fromroot.appstate>      ) {        this.activity$ = this.store.select(s => s.dashboard.activity)        this.images$ = this.store.select(s => s.dashboard.images)        this.hideswipeupbutton()      } 

and server returns if there data:

    activity {       "data":[[1,1,0,1,0,1,0,1,0,0,1,0],[0,0,0,1,1,0,1,0,1,1,1,0]],       "types":["message","motion"],       "graph_start":0,       "graph_end":1320,       "graph_step":120,       "last_message_time":"2017-07-11t20:17:02.118z",       "last_motion_time":"2017-07-11t21:24:02.118z"     }     images {       data: "https://us.123rf.com/450wm/budabar/budabar1511/budabar151100162/48605730-old-man-sitting-on-bed-and-holding-head-with-hands.jpg?ver=6"       id: "30230de6-471e-4866-aa6d-ff3e6dd1eee0"     } 

so in effect, i'm proceeding server options.date date want data. , if there no data server returns undefined , can't read , app crashes. in situation, need set default values.

i managed solve problem. first defined default values in reducer , set return values have object.assign(). in reducer if there empty array returned server, reducer return default values. reducer looks this:

     const defaultactivityvalues = {        data:[[0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0]],        types:["message","motion"],        graph_start:0,        graph_end:0,        graph_step:0,        last_message_time:"2017-01-01t20:17:02.118z",        last_motion_time:"2017-01-01t21:24:02.118z"      }      export interface state {        activity: any,        images:      }       const initialstate: state = {        activity: null,        images: null      }       export function reducer (state = initialstate, action: action): state {        switch (action.type) {          case dashboardactions.get_activity_success:            return object.assign({}, state, {              activity: object.assign({}, defaultactivityvalues, action.payload)          })          case dashboardactions.get_images_success:            return object.assign({}, state, {              images: action.payload          })          default:            return state        }      }