kotetsu v0.0.3

kotetsu

Example

view

import React, { Component } from 'react';
import { Kotetsu } from './index';
import { countUp } from './actions/';

export default class App extends Component {
    constructor(props) {
        super(props);
        this.subscribe('Count');
        this.state = {
            count: 0
        };
    }

    render() {
        const { count } = this.state;
        return (
            <div className="count">
                <p>
                    count: { count }
                </p>
                <button type="button" onClick={ this._onClick.bind(this) }>
                    +
                </button>
            </div>
        );
    }

    subscribe(storeName) {
        Kotetsu.subscribe(storeName, (state) => {
            this.setState(state);
        });
    }

    _onClick() {
        countUp();
    }
}

action

import { Kotetsu } from 'path/to/kotetsu':

export function countUp() {
    Kotetsu.dispatch('countUp', 1);
}:

store

store base

class StoreBase {

    constructor(emitter) {
        this._kotetsu = emitter;
    }

    subscribe(name, callback) {
        this._kotetsu.on(name, callback);
    }

    get eventName() {
        return `change${this.name}`;
    }

    change() {
        this._kotetsu.emit(this.eventName, this.states);
    }
};

export default StoreBase;

count store

import StoreBase from './store';

class CountStore extends StoreBase {

    constructor(emitter) {
        super(emitter);
        this.name = 'Count';
        this.states = {
            count: 0
        };

        this.eventSubscribe();
    }

    eventSubscribe() {
        this._kotetsu.on('countUp', (num) => {
            this.onCountUp(num);
        });
    }

    onCountUp(num) {
        this.states.count += num;
        this.change();
    }

};

export default CountStore;

Start the kotetsu

import React from 'react';
import App from './components/app';
import CountStore from './stores/count_store';
import createKotetsu from './kotetsu';
export const Kotetsu = createKotetsu();

document.addEventListener("DOMContentLoaded", (event) => {
    // Start the kotetsu
    Kotetsu.run({
        component:  <App />,
        render:     document.getElementById('root'),
        stores:     [CountStore]
    });
});