Popular posts

Well, React promotes unidirectional data flow from parent to child. But there are many cases where you will need a global event system. For example, some of your components might want to listen to a path change event and react to it. Here is how you can do it.

P.S. I am using Alt, a Flux implementation.

First you need to create a store. Let's call it EventStore :

var alt = require('alt');
var EventActions = require('../actions/EventActions');

class EventStore{
    constructor(){
        this.bindListeners({
            eventReceived:  EventActions.TRIGGER_EVENT
        });
    }

    eventReceived(name){
        this.event = name;
    }

}

module.exports = alt.createStore(EventStore, 'EventStore');

Now you need to create some actions. Let's create a file called EventActions:

var alt = require('alt');

class EventActions {
    triggerEvent(name){
        this.dispatch(name);
    }
}


module.exports = alt.createActions(EventActions);

Now whenever you need to trigger a particular event you just have to call EventActions.triggerEvent('sample.event').

In order to listen to this event your component just needs to do the following in componentDidMount callback.

EventStore.listen(this.onEventReceived);

Inside the callback onEventReceived you can use a simple switch case to put a check on the event type and respond accordingly.

Let me know if you have any questions!