ngrx store - angular 2 losing data on page reload -

i list of reservations ngrx/store this, data comes in disappears when page reloads. have change routes back.

ngoninit() {  this.store.select(state => state.authstate.profile).subscribe(profile => {    this.profile = profile;   if (this.profile) {     this.userid = this.profile.$key;   }     });     if (this.userid) {     this.reservations$ = this.reservationservice.loaduserreservations(this.userid);   }  }     ngonchanges() {     if (this.userid) {     this.reservations$ =      this.reservationservice.loaduserreservations(this.userid);       }    } 

not sure if enough code illustrate problem.

in auth service

this.auth$.authstate.subscribe(user => {   if (user) {      const userdata = user;     const userref = db.object("users/" + userdata.uid);      const datatoset = {       displayname: userdata.providerdata[0].displayname,       email: userdata.providerdata[0].email,       photourl: userdata.providerdata[0].photourl,       providerid: userdata.providerdata[0].providerid,       registeredat: new date()     };      userref.take(1).subscribe((user) => {       if (user.$exists()) {         // console.log('user exists', user);         this.store.dispatch(this.authactions.updateuserinfo(user));        } else {         // console.log('user not exists');         userref.set(datatoset)           .then((result) => {             // console.log(result)           })           .catch((error) => {             // console.log(error);           });       }     });     // console.log('hello user', user);     this.store.dispatch(this.authactions.loginsuccess(user));   } else {     this.store.dispatch(this.authactions.logoutuser());   } });  } 

i'm using firebase , subscribing authstate changes. when user log ins dispatch action update store, i'm using authstate.profile filter user's reservations , works fine. i'm setting observable reservations$ on ngoninit().

there several things here.

first of all, store plain, in-memory, javascript object. means on page reload gone.

second, if need kind of persistance of user auth data should, upon user logs in, put data store (what do) , additionally put localstorage or cookie. should have mechanism of reading localstorage/cookie auth data , refill store on page reload (or page load, matter). [this separate issue, givin context]

now, 1 thing never want ot happen user ends on reservations component if not logged in (in other words, if there no authstate data in store). , happening.

you have several options solve this. one, best, have authguard run in canactivate route reservation component uses.

so, this...

checkauthguard:

canactivate(route: activatedroutesnapshot): observable<boolean> {     return this.store.select(yourpartofstatewhereauthdatais)       .map(profiledata => !!profiledata)       .take(1)       .do(authenticated => {         if (!authenticated) {           this.router.navigate([ 'login' ], {             queryparams: { referer: this.createurl(route) }           });         }       });     } 

and in routing, reservations component route:

{   path: '',   component: reservationscomponent,   canactivate: [checkauthguard] } 

this ensure that:

1. if user ends on reservations component > there authdata
2. if there no authdata in store, when attempting go reservations > user redirected login page

now, 1 additional thing getting reservations. seems not getting reservations store service directly. i'd suggest put 1 more guard, reservations component , there do:

1. load reservations (through dispatching ngrx action in turn call service have)
2. when store filled registration data, guard allow going reservations component
3. in reservations component store.select(partofstorewherereservationsare) , use them there

it might bit many infos hope you'll find way through ;)