Unite Event Listeners

Controller.js

import React from 'react';
import app from '@SE/Core/App';
import Controller from '@SE/Core/Page/Controller';
import Button from '@SE/Core/Button';

export default class Component extends React.Component {
    static propTypes = {};

    constructor (props) {
        super(props);

        app.withEach('handleClick').bind(this);
    }

    componentDidCatch (error, info) {
        app.withException(error, info);
    }

    handleClick () {
        app.dispatch(this, 'EventName', {
            hello: 'world'
        });
    }

    render () {
        return (
            <Controller route="Acme:HelloWorld:home" title="Hello World!">
                <Button onClick={this.handleClick}>Click Me</Button>
            </Controller>
        );
    }
}

Widget.js

import React from 'react';
import app from '@SE/Core/App';
import Card from '@SE/Core/Card';
import Loader from '@SE/Core/Loader';

export default class Widget extends React.Component {
    static propTypes = {};

    constructor (props) {
        super(props);

        this.listener = null;
        this.state = {
            customKey: null
        };
    }

    componentDidCatch (error, info) {
        app.withException(error, info);
    }

    componentDidMount () {
        this.listener = app.subscribe('EventName', payload => {
            console.log('payload', payload);
            this.setState({
                customKey: payload.hello
            });
        });
    }

    componentWillUnmount () {
        app.unsubscribe(this.listener);
    }

    render () {
        return (
            <Card title="Widget">
                <div className="d-flex align-items-center">
                    <div>Hello:</div>
                    <div className="ml-1">
                        {!this.state.customKey ? <Loader /> : this.state.customKey}
                    </div>
                </div>
            </Card>
        );
    }
}