React - クラス（例：User.username）にグローバル変数を格納する方法

Question

これでローカルのフラスコサーバーにajaxリクエストを送信するログインで少し反応したアプリケーションを作成しました。これは{token:TOKEN, user:{username:USERNAME,email:EMAIL}}を返します。 JSON。

私のリアクションアプリには複数のページがあるので、ReactRouterを使用していますが、複数のReact.createClass({})インスタンスでUser.usernameなどの変数にアクセスする方法を把握することはできません。私は、このクライアント側のすべてをやっている

念頭に置いてクマ（私は、サーバー側のレンダリングを反応させるために移動するまで）

現在、「私はlocalStorage内の変数のこれらのタイプを格納していますが、これは、彼らがドンことを意味UIの更新、URLの変更、リフレッシュなしで自動的に更新されます。

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

しかし、あなたは、あなたがコンポーネント間で共有する必要があり、複数のデータを持っている場合は、私が行うことができるようにしたいと思い

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

ルート

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

であることは、あなたがのために行く必要があります共通の店舗モデル、すなわちReduxまたはFlux。

したがって、localStorageに格納してデータを共有する代わりに、Reduxストアに格納してそこからアクセスできます。

Hereは、URLの変更にユーザー情報がどのように変化するかそれ