score:1

Accepted answer

instead of subscribing to the stores at your component level, why not subscribe where you render the components (e.g. menu.js)?

you could wrap your rendering code in a function, and in that function read the store's state before passing it as a prop to your component. you would call render() manually to do your first render, but also subscribe to the store passing the render function as a callback:

// menu.js
var react = require('react');
var reactdom = require('react-dom');
var menu = require('./components/menu.react');
var commonstore = require('../stores/commonstore');

function render() {
  var state = commonstore.getstate();
  reactdom.render(
      <menu data={state} />,
      document.getelementbyid('menu')
  );
}

commonstore.addchangelistener(render);
render();

note: i'm not sure what getters your store has, so i've just written some example code.

your component code would then simply be:

// ./components/menu.react.js
var react = require('react');
var commonactioncreators = require('../actions/commonactioncreators');

var menu = react.createclass({
    _handleclickmenu: function() {
        commonactioncreators.setmenuclieckon();
    }
});

and then repeat the process for the info component.

this fiddle shows an example of this approach working in practice (with some dummy components, store and action creators), to prove that the concept works: https://jsfiddle.net/vgskht45/1/

score:1

i think the main problem is you're not using your store to set the state in your components.

info.react.js should be:

var react = require('react');
var commonstore = require('../stores/commonstore');
var commonactioncreators = require('../actions/commonactioncreators');

var info = react.createclass({
    componentdidmount: function() {
        commonstore.addchangelistener(this._handlechangestore);
    },
    componentwillunmount: function() {
        commonstore.remchangelistener(this._handlechangestore);
    },
    getinitialstate() {
        return {
            clickflag: commonstore.getclickflag()
        };
    },
    _handlechangestore: function() {
        this.setstate(clickflag: commonstore.getclickflag();
        if (this.state.clickflag) {
            console.log("menu is clicked"); // i want to detect the change.
        }
    },
});

additionally, you will want to have a condition that resets your clickflag.

update:

looking at your code, you shouldn't have each component using their own separate <script>. instead you should have a central js (frequently called app.js) which then displays both the menu and info components. you then don't need to separate menu into js/menu.js and js/components/menu.react.js. likewise, you shouldn't have the info component separated into js/info.js and js/components/menu.react.js. you should just have js/components/menu.react.js and js/components/info.react.js, with app.js handling what you currently have js/menu.js and js/info.js doing.

example:

index.html

<div>
  <div id="app"></div>
</div>

<script src="js/app.js"></script>

app.js

var react = require('react');
var reactdom = require('react-dom');
var menu = require('./components/menu.react');
var info = require('./components/info.react');

function renderdom() {
    reactdom.render(
        <app />,
        document.getelementbyid('app')
    );
}

renderdom();

info.react.js

var info = react.createclass({
    componentdidmount: function() {
        commonstore.addchangelistener(this._handlechangestore);
    },
    componentwillunmount: function() {
        commonstore.remchangelistener(this._handlechangestore);
    },
    getinitialstate() {
        return {
            count: commonstore.getstate()
        };
    },
    _handlechangestore: function() {
        this.setstate(count: commonstore.getstate();
    },
    render: function() {
        return (
            <div>
                info: {this.state.count}
            </div>
        );
    },
});

Related Query

More Query from same tag