如何從它的孩子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功能。您可以通過它下來的道具，或使用全局存儲，如果你沒有一個同構的應用程序。