ReactJS + flummox を ES6 の記述でカウンターのサンプル #React

目的

Web+DB Press Vol.87 の Flux の記事が素晴らしかったので、サンプルコードの flux-counter(fluxxor) を ES6 の class など使って書ける flummox で書き換えてみた。

下記以外ファイルは雑誌のサンプルコードを参照してください。
- 「Emerging Web Technology研究室」で使用されたソースコード

package

reactify ではなく babelify を使う

pacage.json

{
  "devDependencies": {
    "browserify": "^10.2.4",
    "flummox": "^3.5.2",
    "react": "^0.13.3",
    "watchify": "^3.2.3"
  },
  "scripts": {
    "watch": "watchify -t babelify src/app.jsx -o dest/app.js -v"
  }
}

$ npm run watch

code

app.jsx

import React from 'react';
import { Actions, Store, Flummox } from 'flummox';
import FluxComponent from 'flummox/component';


const constants = {
    UPDATE_COUNTER: 'UPDATE_COUNTER'
};


class CounterStore extends Store {
    constructor(flux) {
        super();

        const counterActions = flux.getActions(constants.UPDATE_COUNTER);
        this.register(counterActions.plusCounter, this.handleUpdateCounter);
        this.register(counterActions.minusCounter, this.handleUpdateCounter);

        this.state = {
            counter: 0
        };
    }

    handleUpdateCounter(payload) {
        this.setState({
            counter: this.state.counter + payload
        });
    }
}

class CounterActions extends Actions {
    plusCounter() {
        return 1;
    }
    minusCounter() {
        return -1;
    }
}

class CounterAppView extends React.Component {
    render() {
        return (
            <div>
                <FluxComponent connectToStores={[constants.UPDATE_COUNTER]}>
                    <CounterView />
                </FluxComponent>
            </div>
        );
    }
}

class CounterView extends React.Component {
    onClickPlus() {
        this.props.flux.getActions(constants.UPDATE_COUNTER).plusCounter();
    }

    onClickMinus() {
        this.props.flux.getActions(constants.UPDATE_COUNTER).minusCounter();
    }

    render() {
        return (
            <div>
                <span>count: {this.props.counter}</span>
                <div>
                    <button onClick={this.onClickPlus.bind(this)}>+1</button>
                    <button onClick={this.onClickMinus.bind(this)}>-1</button>
                </div>
            </div>
        );
    }
}
CounterView.propTypes = {
    counter: React.PropTypes.number
};

class Flux extends Flummox {
    constructor() {
        super();

        this.createActions(constants.UPDATE_COUNTER, CounterActions);
        this.createStore(constants.UPDATE_COUNTER, CounterStore, this);
    }
}

const flux = new Flux();

React.render(
    <FluxComponent flux={flux}>
        <CounterAppView />
    </FluxComponent>,
    document.getElementById('app-container')
);

ReactJS + flummox を ES6 の記述でカウンターのサンプル

目的

package

code

参考