ReactJS + alt(flux) を ES6 の記述でカウンターのサンプル


## 目的
[Web+DB Press Vol.87 の Flux の記事](http://gihyo.jp/magazine/wdpress/archive/2015/vol87) が素晴らしかったけど、サンプルコードが [fluxxor](http://fluxxor.com/)だったので、 ES6 の class など使って書ける [alt](https://github.com/goatslacker/alt) で書き換えてみた。
（fluxxor は ES6 未対応）

ちなみに雑誌のサンプルコードは [こちらの「Emerging Web Technology研究室」](http://gihyo.jp/magazine/wdpress/archive/2015/vol87/support)

## ファイル構成

```
.
├── dest
│   └── app.js
├── index.html
├── package.json
└── src
    ├── actions
    │   └── counter_actions.js
    ├── alt.js
    ├── app.jsx
    ├── components
    │   └── counter.jsx
    └── stores
        └── counter_store.js
```

## package

reactify ではなく babelify を使う

```pacage.json
{
  "devDependencies": {
    "alt": "^0.16.10",
    "babelify": "^6.1.2",
    "browserify": "^10.2.4",
    "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 CounterAppView from './components/counter.jsx';


React.render(
    <CounterAppView />,
    document.getElementById('app-container')
);
```

```alt.js
import Alt from 'alt';
var alt = new Alt();

export default alt;
```

```index.html
<!doctype html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Flux</title>
    </head>
    <body>
        <div id="app-container"></div>

        <script src="dest/app.js"></script>
    </body>
</html>
```

```src/actions/counter_actions.js
import alt from '../alt';

class CounterActions {
    constructor() {
        this.generateActions(
            'plusCounter',
            'minusCounter'
        );
    }
}

export default alt.createActions(CounterActions);
```
`constructor` に `generateActions` 書くやり方と `this.dispatch` を使うやり方などがあるみたい。コード見ておいた方がいいかも。

```src/components/counter.jsx
import React from 'react';
var AltContainer = require('alt/AltContainer');

import CounterActions from '../actions/counter_actions';
import CounterStore from '../stores/counter_store';


class CounterView extends React.Component {
    render() {
        return (
            <div>
                <span>count: {this.props.counter}</span>
                <div>
                    <button onClick={CounterActions.plusCounter}>+1</button>
                    <button onClick={CounterActions.minusCounter}>-1</button>
                </div>
            </div>
        );
    }
}


class CounterAppView extends React.Component {
    render() {
        return (
            <div>
                <AltContainer store={CounterStore}>
                    <CounterView />
                </AltContainer>
            </div>
        );
    }
}

 export default CounterAppView;
```

```src/stores/counter_store.js
import alt from '../alt';
import CounterActions from '../actions/counter_actions';

class CounterStore {
    constructor() {
        this.counter = 0;

        this.bindListeners({
            handlePlusCounter: CounterActions.PLUS_COUNTER,
            handleMinusCounter: CounterActions.MINUS_COUNTER
        });
    }

    handlePlusCounter() {
        this.counter += 1;
    }
    handleMinusCounter() {
        this.counter -= 1;
    }
}

export default alt.createStore(CounterStore, 'CounterStore');
```

`CounterActions.PLUS_COUNTER` の `PLUS_COUNTER` を actions に書いたキャメルケースにしても動いた。小文字のスネークケースにしたら動かなかった。どうなってるのかソースコード見た方がいいかも。

## 表示

```
$ python -m SimpleHTTPServer 8000
```

- http://localhost:8000


![スクリーンショット 2015-07-03 0.20.12.png](https://qiita-image-store.s3.amazonaws.com/0/41656/3fb3784f-2d3e-965e-eff8-33d1bc7e8d04.png "スクリーンショット 2015-07-03 0.20.12.png")


## 感想

- サンプルなので JS を1ファイルでまとめようかと思ったけど、 `alt.createStore` とかあるのでalt は基本的にファイルを分けて書くのがよさそう。どのみち実際アプリ作る時はそうなると思うけど。


## 参考

- http://gihyo.jp/magazine/wdpress/archive/2015/vol87
- http://acdlite.github.io/flummox