Обновить состояние приложения от дочернего элемента в React + Flux

ОБНОВЛЕНИЕ Оказалось, что весь мой подход был неправильным. Как следует из принятого ответа, хорошей отправной точкой является TodoMVC. приложение, созданное с помощью React + Flux и размещенное на GitHub.

Я создаю очень маленькое приложение React + Flux для учебных целей. На данный момент он состоит только из формы входа и содержимого (которое на самом деле просто показывает имя пользователя). Я планирую, чтобы компонент приложения был единственным компонентом с состоянием в моем приложении, который будет отправлять свое состояние дочерним элементам в качестве реквизита. Но я не могу понять, как лучше всего обновлять состояние приложения от дочернего элемента (в моем случае форма ввода). Я думаю, что, возможно, смогу поднять его по иерархии, но это действительно кажется плохой практикой. Кроме того, должен ли я сохранять зарегистрированное имя пользователя в магазинах?

Вот основной пример того, что я имею в виду:

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

Я настроил JSFiddle здесь с этим примером, моя цель — заменить [имя пользователя] на предупреждающая строка.