如何从它的孩子reactjs和回流装置，容器组件的状态？

Question

我有应该改变其内部部件，每当有在其状态的改变的报头中，当用户点击登录按钮等时，用户简档导航替换按钮。

我的按钮是一个导航组件的一部分，我不知道如何从这个导航组件更新其容器组件的状态。

这里是我的店看起来像此刻

var React = require('react'); 
var Reflux = require('reflux'); 
var LoginActions = require('../actions/loginbutton.js'); 

var LoginStore = Reflux.createStore({ 

    listenables: LoginActions, 

    getInitialState: function() { 

     return { 
        loggedin : false, 
        links: [{ 
           "name": "Link1", 
           "url": "http://www.google.com" 
          }, 
           { 
            "name": "Link2", 
            "url": "http://www.google.com" 

          }, 
          { 
           "name": "Link3", 
           "url": "http://www.google.com" 
          }] 

       }; 


    }, 

    onLogin: function() { 

     /*How do i replace the state for the header*/ 

     Header.replaceState({ 
      loggedin: true, 
      data: { 
        "userName": "John Doe", 
        "profile": "http://www.google.com", 
        "img": "https://secure.gravatar.com/avatar/87f33484c35375ea9c8fddd2f7e91ee5?d=https://d3rpyts3de3lx8.cloudfront.net/hackerrank/assets/gravatar.jpg&s=200", 
        "email": "maisnamraju@gmail.com", 
        "links": [{ 
          "name": "Settings", 
          "url": "/settings" 
        }, 
         { 
          "name": "Profile", 
          "url": "/dashboard" 
        }, 
         { 
          "name": "Account", 
          "url": "/Account" 
        }, 
         { 
          "name": "Logout", 
          "url": "/logout" 
        }] 
      } 

     }); 

     console.log(this.state); 

    } 

}); 


module.exports = LoginStore; 

这里是我的头组件

var React = require('react'); 
var Navigation = require('./navmenu.js'); 
var UserNav = require('./usermenu.js'); 
var ReactAddons = require('react/addons'); 
var Reflux = require('reflux'); 
var LoginStore = require('../stores/loginstore.js'); 
var LoginActions = require('../actions/loginbutton.js'); 

var LoggedOut = React.createClass({ 

    props: { 

     navs: React.PropTypes.array 
    }, 

    render: function() { 

      return(
       <div> 
         <div className = "nav navbar-nav navbar-right" > 
          <button onClick={LoginActions.Login} className = "login btn btn-primary" > <i className = "fa fa-facebook" > </i> Log In</button > 
         </div> 
         <div className = "collapse navbar-collapse left-bar" > 
          <Navigation classNames = "notloggedin nav navbar-nav" navs = {this.props.navs} /> 
         </div> 
       </div> 

      ); 

    } 

}); 


var LoggedIn = React.createClass({ 

    props: { 
     navs: React.PropTypes.array, 
     userName: React.PropTypes.string 
    }, 

    render: function() { 

     return(
      <div className = "nav navbar-nav navbar-right" > 
        <UserNav navs = {this.props.links} userName={this.props.userName} /> 
      </div> 
     ); 
    } 
}); 



var Header = React.createClass({ 

    mixins: [Reflux.connect(LoginStore, 'data')], 

    render: function() { 

     var LoggedInState = this.state.data.loggedin; 

     if(LoggedInState === 'false' || LoggedInState === false) { 

      LogInArea = <LoggedOut navs={this.state.data.links} /> 

     }else { 

      LogInArea = <LoggedIn navs={this.state.data.data.links} userName={this.state.data.data.userName}/> 
     } 

     return (

       <div id = { this.props.headerId } > 
        <div className = "navbar navbar-default navbar-fixed-top" > 
         <div className = "container" > 
          <div className = "navbar-header" > 
            <button type = "button" className = "navbar-toggle collapsed" data-toggle = "collapse" > 
             <span className = "sr-only"> Toggle navigation </span> 
              <span className = "icon-bar" > </span> 
              <span className = "icon-bar" > </span> 
              <span className = "icon-bar" > </span> 
            </button > 
            <a href = "#" > 
              <img src="https://www.hackerrank.com/assets/brand/h_mark_sm.png" /> 
            </a> 
           </div> 
           { LogInArea } 
         </div> 
        </div> 
       </div> 
     ); 

    } 

}); 


module.exports = Header; 

我没有问题渲染最初的头当我设置的初始状态日期，但如何定位它的状态从LoggedOut组件内部，使得其套状态店内？

Answer 1

要修改商店的状态，您应该派遣您以前使用Reflux.createActions创建的action，而不使用您的LoggedOut组件。

比方说，你的行动被称为logout，你会喜欢这个创建它：

var logout = Reflux.createAction(); 

为您的商店反应它，你必须听行动：

var statusStore = Reflux.createStore({ 
    init: function() { 
    this.listenTo(logout, this.handleLogout); 
    }, 

    handleLogout: function() { 
    // set whatever state you want here 
    } 
}); 

现在，你有你的组件内部做的是调用logout功能。您可以通过它下来的道具，或使用全局存储，如果你没有一个同构的应用程序。