javascript - Facebook data, how to put it in props? -

i trying put response facebook in props of app can have them available everywhere. far, doing saving data need in localstorage, guess not proper way.

actually userid been saved in props not proper flow. @ end of post see flow have, , flow need.

look @ code

// library import react 'react'; import connecttostores 'alt-utils/lib/connecttostores';  const { proptypes } = react;  import appactions '../../actions/appactions'; import appstore '../../stores/appstore';  // @connecttostores export default class app extends react.component {    constructor(props) {     super(props);   }    componentdidmount() {     const _this = this;     _this.checksession();   }    componentdidupdate() {   render() {     return (       <div>         <htmlheadertags />         <header />         <div classname='main-content'>           {this.props.children}         </div>         <footer />       </div>     );   } }  app.proptypes = {   children: proptypes.node };  app.prototype.initfb = function(callback){    window.fbasyncinit = function() {     fb.init({       appid      : window.facebook_id,       cookie     : true,  // enable cookies allow server access session       xfbml      : true,  // parse social plugins on page       version    : 'v2.5' // use version 2.1     });     callback();   }.bind(this);    // load sdk asynchronously   (function(d, s, id) {     var js, fjs = d.getelementsbytagname(s)[0];     if (d.getelementbyid(id)) return;     js = d.createelement(s); js.id = id;     js.src = '//connect.facebook.net/en_us/sdk.js';     fjs.parentnode.insertbefore(js, fjs);   }(document, 'script', 'facebook-jssdk'));  }  app.prototype.checkfbsession = function() {    fb.getloginstatus(function(response) {     if (response.status === 'connected') {        // here setting userid in localstorage       localstorage.setitem('userid', response.authresponse.userid);      } else if (response.status === 'not_authorized') {       // user logged in facebook,       // has not authenticated app       console.error('rejected (not_authorized)');     } else {       // user isn't logged in facebook.       console.error('rejected (not logged in)');       localstorage.removeitem('userid');     }   }); }  app.prototype.callserver = function(opts){    var xmlhttp=new xmlhttprequest();   xmlhttp.open(opts.type, opts.url);   xmlhttp.onreadystatechange = function() {     if (xmlhttp.readystate == xmlhttprequest.done) {       if(xmlhttp.status == 200){         opts.success(xmlhttp.response);       }else{         opts.error(json.parse(xmlhttp.response));       }     }   }   xmlhttp.send(opts); }  app.prototype.checksession = function() {    const _this = this;    _this.callserver({     url : '/api/me',     type : 'get',     success(res){       console.log(res);     }, error(error){       console.error(error);     }   });    _this.initfb(function() {      _this.checkfbsession(function(response){       console.log(response);     }, function(error){       console.log(error);     });   });  }  app.prototype.displayname = 'app'; 

there begins. in app.prototype.checkfbsession setting userid in localstorage. have action , store this, look:

the action

import { createactions } 'alt-utils/lib/decorators'; import alt '../alt';  @createactions(alt) class appactions {   constructor() {     this.generateactions(       'checkfbsession'     );   } } export default alt.createactions(appactions); 

and store

import appactions '../actions/appactions';  import alt '../alt'; import { createstore, bind } 'alt-utils/lib/decorators';   @createstore(alt) class appstore {    static displayname = 'appstore';    constructor () {     this.state = {       facebookprop : localstorage.getitem('userid') || '',     };   }    @bind(appactions.checkfbsession)   checkfbsession () {     this.setstate({       facebookprop : localstorage.getitem('userid') || {}     });   } 

and here component requiring userid

import react 'react'; import connecttostores 'alt-utils/lib/connecttostores';  import appactions '../../actions/appactions'; import appstore '../../stores/appstore';  @connecttostores export default class header extends react.component {    constructor(props) {     super(props);   }    static getstores () {     return [       appstore     ];   }    static getpropsfromstores () {     return {       ...appstore.getstate()     };   }    render () {      let displayuserid;      displayuserid = this.props.facebookprop ?       {this.props.facebookprop} :       <button bssize="xsmall" bsstyle="primary">{'sign in'}</button>;      return (       <navbar statictop>                    {displayuserid}       </navbar>     );   } };  header.prototype.displayname = 'header';  export default header; 

so need know is:

where put facebook login code in order send data response store.

because doing is: loading app, call facebook functions on componentdidmount, storing response facebook in localstorage , spreading data components need.

the flow need similar that, need userid facebook in stores , actions , not parent component.

so recommendations?

i open suggestions on how first time working facebook login, junior dev.