ReactJs - how to fire dialog using reflux

Question

I am new to reflux and I'm trying to find out the best way of triggering my react-skylight dialog....

My react app has nested components, which is very top heavy at the moment. I would like to fire off the dialog when my tabLink component is clicked.

Where should I put the markup for my skylight?

Could my skylight have a store and an action? which I could broadcast into?

UPDATED: Can I fire off my skylight dialog by calling its action direct from my component?

If I pull in the action for the dialog:

DialogAction = require('../partials/actions/DialogAction');

Can I make a direct call to the action here in the tabLink component:

mixins: [Reflux.connect(TabLinkStore)],

onShowDialog:function(){
   DialogAction.onShowDialog();
},

Dialog action:

var Reflux = require('reflux');

var DialogAction = Reflux.createActions([
"showDialog"
]);


module.exports = DialogAction;

Otherwise, am I right in thinking the skylight component would need to be in each component its needs firing from?

I would like to keep the skylight decoupled, and the view clean.

Tablink component:

var TabLink = React.createClass({
contextTypes: {
    router: React.PropTypes.func
},

mixins: [Reflux.connect(TabLinkStore)],

getTabClass: function () {
    return this.props.isActive ? "active_on" : "";
},

getLinkNode: function() {
    if (this.props.link) return <a href={this.props.link} >{this.props.label}</a>;
    return <Link to={this.props.route} >{this.props.label}</Link>;
},

render: function () {
    if (this.props.clearBasket) return TabLinkAction.ShowDialog(id, function(isSelected) {
        checkbox.checked = isSelected;
    });
    return (
        <li className={this.getTabClass()}>
            {this.getLinkNode()}
        </li>
    );
}
});

module.exports = TabLink;

Store:

var React = require('react'),
Reflux = require('reflux'),
TabLinkAction = require('../actions/TabLinkAction'),
skylight  = require('react-skylight');

var TabLinkStore = Reflux.createStore({

listenables: TabLinkAction,
onShowDialog: function(){
        // show dialog here?
}

});

module.exports = TabLinkStore;

action:

var Reflux = require('reflux');

var TabLinkAction = Reflux.createActions([
"ShowDialog"
]);


module.exports = TabLinkAction;

Skylight that needs to fire:

<SkyLight ref="myModal" title="TITLE FOR MODAL" showOverlay={true}>Modal With Overlay</SkyLight>

Answer 1

In the store you want a set/get for hideSkyLight. In the component that listens to the store setState({hideSkyLight: store.getHideSkyLight()}).

    render: function() {
        var hideSkyLight = this.state.hideSkyLight;
        return (
            <ShowSkyLight hide={hideSkyLight}/>
        )
    }

In your component ShowSkyLight;

    render: function() {
        if (this.props.hide) return null;
        return (
            <SkyLight ref="myModal" title="TITLE FOR MODAL" showOverlay={true}>Modal With Overlay</SkyLight>
        )
    }

One advantage of this pattern is that the SkyLight component is not rendered until called. This can improve performance.