Update application state from child in React + Flux

Question

UPDATE It turned out my whole approach was wrong. As the accepted answer suggests, a good starting point is the TodoMVC app built with React + Flux and hosted on GitHub.

---

I am building a very small React + Flux app for learning purposes. At the moment it consists only in a login form and in a content (that actually just shows the username). I'm planning to have the application component as the only stateful component in my app, that will send its state to the children as props. But I can't figure out what's the best practice to update the application state from a child (in my case, the input form). I think I can probably bubble it up along the hierarchy, but it really seems a bad practice. Also, should I save the logged in username in the stores?

Here's a basic example of what I mean:

var LoginForm = React.createClass({
    _onSubmit : function(e) {
        e.preventDefault();

        var username = this.refs.username.getDOMNode().value.trim();

        if(!username) return;

        alert(username);

        this.refs.username.getDOMNode().value = "";

        return
    },

    render : function() {
        return (
            <div>
                <form onSubmit={this._onSubmit}>
                    <input
                        type="text"
                        placeholder="Insert username"
                        ref="username"
                    />
                    <button type="submit">Login</button>
                </form>
            </div>
        );
    }
});

var Header = React.createClass({
    render : function() {
        return (
            <div className="header">
                <LoginForm />
            </div>
        );
    }
});

var Content = React.createClass({
    render : function() {
        return (
            <div className="content">Welcome, [username]</div>
        );
    }
});

var MyApp = React.createClass({
    render : function() {
        return (
            <div>
                <Header />
                <Content />
            </div>
        );
    }
});

React.renderComponent(
    <MyApp />,
    document.body
);

I have set up a JSFiddle here with this example, my goal is to substitute [username] with the alerted string.

Answer 1

im sorry but i didn't see any flux's architecture in your code yet :) for a high level implementation explanation, assuming you have all 3 basic structure of flux, namely action, dispatcher, and store.

in the _onSubmit in LoginForm component, you should trigger the action to perform the login, and then the event will go through the dispatcher and pass to store.

from the store, it will perform the login (and here you save the [username] information), and then trigger an event (for example change). This event will be registered and listening by the Content component in the componentDidMount. Upon listened the change event, you should able to get the username information from the store. This is a good example for the flux