React - Wie man globale vars in einer Klasse speichert (zB User.username)

Question

Also habe ich eine kleine react App mit einem Login erstellt, die eine Ajax Anfrage an einen lokalen Flashin Server sendet, der {token:TOKEN, user:{username:USERNAME,email:EMAIL}} als zurückgibt JSON.

Da meine React-App jedoch mehrere Seiten haben wird, verwende ich ReactRouter, aber ich kann nicht herausfinden, wie global auf Variablen wie User.username zugegriffen wird, in mehreren React.createClass({}) Instanzen.

Beachten Sie, dass ich all diese Client-Seite tun (bis ich bewegen Serverseite Rendering reagieren)

Derzeit bin ich diese Art von Variablen in localStorage zu speichern, aber dies bedeutet, dass sie don‘ t wird automatisch in der Benutzeroberfläche aktualisiert, ohne URL-Änderung oder Aktualisierung.

const Admin = (props) => (
    <div> 
     <h2>Admin</h2> 
     <p>Welcome, {localStorage.username}</p> 
     {props.children} 
    </div> 
) 

Aber was ich möchte in der Lage sein zu tun ist,

const Admin = (props) => (
    <div> 
     <h2>Admin</h2> 
     <p>Welcome, {User.username}</p> 
     {props.children} 
    </div> 
) 

Routen

ReactDOM.render(
    <Router history={browserHistory}> 
     <Route path="/" component={App}> 

      <Route path="login" component={Login}> 
       <IndexRoute component={LoginForm}/> 
       <Route path="twofactor" component={twoFactor}/> 
       <Route path="backupcode" component={backupCode}/> 
      </Route> 

      <Route path="register" component={Register} onEnter={auth.auth_disallow}/> 

      <Route path="admin" onEnter={auth.required} component={Admin}> 
       <Route path="dashboard" component={Dashboard}> 
        <IndexRoute component={DashboardIndex}/> 
       </Route> 

       <Route path="settings" component={Settings}> 
        <IndexRoute component={SettingsIndex}/> 
        <Route path="changepassword" component={ChangePassword}/> 
        <Route path="editinfo" component={EditInfo}/> 
       </Route> 

       <Route path="/logout" onEnter={auth.logout}/> 
      </Route> 

      <Route path='*' component={NotFound}/> 

     </Route> 
    </Router>, 
    document.getElementById('app') 
); 

Answer 1

Wenn Sie mehrere Daten, die Sie zwischen den Komponenten teilen müssen, sollten Sie gehen für ein gemeinsames Ladenmodell, dh Redux oder Flux.

Anstatt Daten durch Speichern in localStorage zu teilen, können Sie sie im Redux-Speicher speichern und von dort aus darauf zugreifen.

Here ist ein nettes Tutorial auf sie