Dispatching actions outside of Griddle components tree

[yoursdearboy]

Griddle version

1.2.0

Expected Behavior

Be able to easily dispatch an action outside of Griddle's components tree (e.g. toggle settings because of other user action than clicking Settings button).

Actual Behavior

The only way I see for now (except putting the whole app into Griddle's Layout component) is to use refs chain (from Griddle component to component where you need this/root) and get store from <Griddle> component manually. Besides that it's too much work, refs doesn't work with functional components.

Steps to reproduce

import Griddle, { actions as griddleActions } from 'griddle-react';

const Root = () => {
    let demo;
    const toggle = () => demo.store.dispatch(griddleActions.toggleSettings());
    return <div>
        <button onClick={toggle}>Not Settings</button>
        <Demo ref={(demoRef) => demo = demoRef}/>
    </div>;
};

class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.saveStore = this.saveStore.bind(this);
    }

    saveStore(ref) {
        this.store = ref.store;
    }

    render() {
        return <Griddle ref={this.saveStore}/>;
    }
}

[dahlbyk]

If I'm reading this right, it seems related to https://github.com/GriddleGriddle/Griddle/issues/647?