import Fluxible from 'fluxible';
import React from 'react';
import {connectToStores, createStore, provideContext} from 'fluxible/addons';

// Action
const action = (actionContext, payload) => {
    actionContext.dispatch('FOO_ACTION', payload);
};

// Store
const FooStore = createStore({
    storeName: 'FooStore',
    handlers: {
        'FOO_ACTION': 'fooHandler'
    },
    initialize: () => { // Set the initial state
        this.foo = null;
    },
    fooHandler: (payload) => {
        this.foo = payload;
    },
    getState: () => {
        return {
            foo: this.foo
        }
    }
});

// Component
class App extends React.Component {
    render() {
        return <span>{this.props.foo}</span>
    }
}

App = provideContext(connectToStores(App, [FooStore], (stores, props) => {
    return stores.FooStore.getState();
}));

// App
const app = new Fluxible({
    component: App,
    stores: [FooStore]
});

// Bootstrap
const context = app.createContext();
context.executeAction(action, 'bar', (err) => {
    console.log(React.renderToString(context.createElement()));
});