1

So, I've created a little react app with a login, which is sending an ajax request to a local flask server, which returns {token:TOKEN, user:{username:USERNAME,email:EMAIL}} as JSON.

However, as my react app will have multiple pages, I'm using ReactRouter, but I can't figure out how to access variables such as User.username globally, in multiple React.createClass({}) instances.

Bear in mind that I'm doing all of this client side (until I move to react server side rendering)

Currently, I'm storing these types of variables in localStorage but this means that they don't get automatically updated in the UI, without a url change, or a refresh.

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

But what I would like to be able to do is 

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

Routes

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')
);

1 Answers1

2

If you have multiple data that you need to share between components, you should go for a common store model i.e Redux or Flux.

So Instead of sharing data by storing in localStorage, you can store it in the Redux store and access it from there.

Here is a nice tutorial on it

Shubham Khatri
  • 270,417
  • 55
  • 406
  • 400
  • Are you able to add an example of this? –  Apr 16 '17 at 07:42
  • I have added a link to a nice getting started tutorial. If you face any issues, let me know I will edit the answer for the same – Shubham Khatri Apr 16 '17 at 07:44
  • I'm still confused as to how the Redux store works, it seems overly complicated, and not really related to what I'm after –  Apr 16 '17 at 08:16
  • @Pipskweak Redux is complicated only at the initial step and if very useful when you want to share you states across components. If don't want to go for it you may well use react-cookie. See this http://stackoverflow.com/questions/41236025/dispatch-action-after-some-elapsed-period/41236250#41236250 – Shubham Khatri Apr 16 '17 at 08:38
  • This post ended up solving my problem http://stackoverflow.com/questions/29697268/member-variables-in-react-class-are-shared-by-reference –  Apr 16 '17 at 09:47
  • Can you elaborate on why he should be using redux or flux instead of localStorage or something simpler? There seems to be no reason to use more complicated storage options for something as simple as a username. Unless there is a good reason I would advice op to just use local storage or something similar: https://www.robinwieruch.de/local-storage-react – n0rd Jun 04 '20 at 09:00