Обновление состояния приложения от ребенка в React + Flux

Question

UPDATE Оказалось, что мой подход был неправильным. Как предполагает принятый ответ, хорошей отправной точкой является приложение 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 here с этим примером, моя цель состоит в том, чтобы заменить [имя пользователя] с оповещена строки.

Answer 1

им жаль, но я не видел архитектуру любого флюса в вашем коде еще :) для реализации объяснения высокого уровня, предполагая, что у вас есть все 3 базовая структура потока, а именно action, dispatcher и store.

в компоненте _onSubmit в LoginForm, вы должны вызвать action выполнить вход в систему, а затем событие будет проходить через dispatcher и перейти к store.

от store, он выполнит вход (и здесь вы сохраните информацию [username]), а затем запустите событие (например, change). Это событие будет зарегистрировано и прослушивается компонентом Content в componentDidMount. После прослушивания события change вы должны получить информацию из магазина username. Это good example для потока