How to set state of container component from its child in reactjs and reflux?

Question

I have a header that is supposed to change its inner components whenever there is a change in its state, like when a user clicks on the login button, the users profile navigation replaces the button.

My button is part of a navigation component and I dont know how to update the state of its container component from this navigation component.

Here is what my store looks like at the moment

 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;

And here is my header component

    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;

I have no problem rendering the initial header when i set the initial state of the date but how do i target it's state from inside the LoggedOut component so that its sets the state inside the store?

Answer 1

To modify the state of a store, you should dispatch an action which you have previously created using Reflux.createActions from without your LoggedOut component.

Let's say your action is called logout, you'd create it like this:

var logout = Reflux.createAction();

For your store to react it you'll have to listen to the action:

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

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

And now all you have to do inside your component is to call the logout function. You can either pass it down as props, or use a global storage if you don't have an isomorphic application.