[初心者向け]Fluxを一周する

import React from 'react';
import ReactDOM from 'react-dom';
import AppContainer from './AppContainer';
import './index.css';

// ただContainerをレンダリングするだけです。
// 実際のViewは、Containerの中でレンダリングしてます。
ReactDOM.render(
  <AppContainer />,
  document.getElementById('root')
);

import React, {Component} from 'react';
import {Container} from 'flux/utils';
import AppView from './AppView';
import ConnectionStore from './ConnectionStore'; // WebSocketでつながるアプリケーションを想定してます。

class AppContainer extends Component { // Viewと同様、React.Componentを継承します
  // stateの変更を監視するstoreを持つ、flux/utilsのReduceStoreを継承したクラス登録します
  static getStores() {
    return [
      ConnectionStore,
    ];
  }

  // stateのgetterを登録します
  static calculateState() {
    return {
      connection: ConnectionStore.getState(),
    };
  }

  // ContainerはあくまでViewです。ただ他の　Viewの親であるというだけです。
  // なので、ここで他のComponentをレンダリングします。
  render() {
    // AppViewでstateの値をpropsとして受け取れるように渡します。
    return <AppView connection={this.state.connection}/>
  }
}

export default Container.create(AppContainer);

import React, { Component } from 'react';
import ServerActions from './ServerActions'; // アプリ独自のActionです。
import './App.css';

class AppView extends Component {
  handleClick(e) {
    e.preventDefault();
    ServerActions.connect();
  }

  render() {
    return (
      <div className="App">
        // onClickでActionを呼び出します。
        <button id="connect" onClick={this.handleClick.bind(this)}>connect</button><br/>
        // Containerで渡された値(もとはstate)は、このComponentではpropsとして参照できます。
        <div>MESSAGE: {this.props.connection.get('message')}</div>
      </div>
    );
  }
}

export default AppView;

import {Dispatcher} from 'flux';

export default new Dispatcher();

import {ReduceStore} from 'flux/utils';
import Immutable from 'immutable';
import AppDispatcher from './AppDispatcher';
import ServerActionTypes from './ServerActionTypes';

class ConnectionStore extends ReduceStore {
  // DispatcherにStoreを登録します。
  constructor() {
    super(AppDispatcher);
  }

  // 初期のStateを作成します。ここで返したオブジェクトに、reduceメソッド内からstateという名前でアクセスできます。
  // ここではImmutable.jsを使って値を作成しています。
  // MapStoreというものがImmutableなMapを作成する役割を担っていたらしいのですが、しばらく前にAPIが削除されてました。
  // https://github.com/facebook/flux/pull/405
  getInitialState() {
    return Immutable.Map({
      ws: null,
      message: 'Initialized',
    });
  }

  // actionを参照してstateを更新する対応表を実装します
  reduce(state, action) {
    switch (action.type) {
      case ServerActionTypes.CONNECTED:

        state.set({ws: action.ws});

        // 新しいstateを返します。
        // stateメソッドで得られる既存のImmutable.Mapではなく、Immutable.jsのupdateメソッドにより新しいオブジェクトを作成して返しています。
        // 返した新しいオブジェクトは、以後stateメソッドで参照できます。
        // Containerは監視対象Storeが変更されたら当該Componentを再描画します。
        return state.update('message', () => 'Connected');

      default:
        return state;
    }
  }
}

export default new ConnectionStore();

import AppDispatcher from './AppDispatcher';
import ServerActionTypes from './ServerActionTypes';

const ServerActions = {
  connect() {
    // websocket周りは省略

    // JSXで指定されるアクションを実装します。
    // DispatcherにはStoreが登録されているので、識別子(type)を指定して引数(今回はws)を指定すれば良いです。
    AppDispatcher.dispatch({
      type: ServerActionTypes.CONNECTED,
      ws: ws,
    });
  }
};

export default ServerActions;

const ServerActionTypes = {
  CONNECTED: 'CONNECTED',
};

export default ServerActionTypes;