ReactとFluxでクライアントサイドの設計

'use strict';

import React from 'react'
import ItemActions from '../actions/item_actions'

export default class ItemForm extends React.Component {
  create(event) {
    let text = this.refs.itemText.getDOMNode().value;
    if (text) {
      ItemActions.create(text);
      this.refs.itemText.getDOMNode().value = '';
    }
  }
  render() {
    return (
      <div className="input-group">
        <input type="text" className="form-control" ref="itemText"></input>
        <span className="input-group-btn">
          <button className="btn btn-primary" type="button" onClick={this.create.bind(this)}>+</button>
        </span>
      </div>
    );
  }
}

'use strict';

import uuid from 'uuid'
import Dispatcher from '../dispatcher/dispatcher'

class ItemActions {
  constructor(dispatcher) {
    this.dispatcher = dispatcher;
  }
  dispatch(params) {
    this.dispatcher.dispatch(params);
  }
  create(body) {
    this.dispatch({
      type: 'create',
      item: {id: uuid.v4(), body: body}
    });
  }
}

export default new ItemActions(Dispatcher);

'use strict';

import {Dispatcher} from 'flux'

export default new Dispatcher();

'use strict';

import EventEmitter from 'eventemitter3'
import Dispatcher from '../dispatcher/dispatcher'

class ItemStore {
  constructor(dispatcher) {
    this.state = this.getInitialState();
    this.eventEmitter = new EventEmitter();
    this.dispatcher = dispatcher;
    this.changeEvent = 'change';
    this.dispatcher.register((action) => {
      this.invokeOnDispatch(action);
    });
  }
  getState() {
    return this.state;
  }
  getInitialState() {
    return {items: []};
  }
  addListener(listener) {
    this.eventEmitter.addListener(this.changeEvent, listener);
  }
  removeListener(listener) {
    this.eventEmitter.removeListener(this.changeEvent, listener);
  }
  emitChange() {
    this.eventEmitter.emit(this.changeEvent);
  }
  invokeOnDispatch(action) {
    switch (action.type) {
      case 'create':
        this.state.items.push(action.item);
        this.emitChange();
      break;
    }
  }
}

export default new ItemStore(Dispatcher);

'use strict';

import React from 'react'
import ItemStore from '../stores/item_store'
import ItemForm from './item_form'
import Items from './items'

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = ItemStore.getState();
  }
  componentDidMount() {
    ItemStore.addListener(this.onChange.bind(this));
  }
  componentWillUnmount() {
    ItemStore.removeListener(this.onChange.bind(this));
  }
  onChange() {
    this.setState(ItemStore.getState());
  }
  render() {
    return (
      <div className="container">
        <ItemForm />
        <Items items={this.state.items} />
      </div>
    );
  }
}