第2回 簡単なReact.jsの使い方 （6/8）

６）Flux

UI開発が小規模の場合、コンポーネント化していけばなんとかなってしまうものですが、規模が大きくなってくると、様々なコンポーネントが複雑に関係し合いイベント地獄に陥ってしまいます。

Facebookはこの問題を解決するためにFluxアーキテクチャを考え出しました。

上図はFluxアーキテクチャを示しています。それぞれの役割は下記の通りです。

このような説明を書かれてもなかなか理解は進まないと思うので、ReactRadarScopeで実例を交えながら説明します。

まず、UIコンポーネントであるDotクラスを見てみます。DotはOSS Radar Scope®の順位を示す丸です。

このDotにマウスが乗ったときに、以下のコールバックが呼ばれます。

_onMouseOver: function(e) {
  RadarAction.updateSelectedOss(this.props.product.id);
},

これがReactViewsからActionCreatorsへの矢印になります。

そして、RadarAction.updateSelectedOssでは次のようにdispatcherを実行します。

updateSelectedOss: function(ossId) {
  RadarDispatcher.dispatch({
    actionType: Constants.UPDATE_SELECTED_OSS,
    ossId: ossId
  });
},

この例だとWebAPIへの矢印がありませんが、そのまま直接RadarDispatcher.dispatchを呼んでいます。

RadarStoreがRadarDispatcherに対してコールバックを指定しているため、RadarStoreに処理はうつります。

RadarDispatcher.register(function(payload) {
  switch(payload.actionType) {
    case Constants.UPDATE_SELECTED_OSS:
      _selectedOss = parseInt(payload.ossId, 10);
      RadarStore.emitChange();
      break;
    default:
      return true;
  }
  return true; // No errors.  Needed by promise in Dispatcher. 
});

この例であれば、_selectedOssの値を更新し、RadarStore.emitChange()を実行します。 MainコンポーネントがRadarStoreのイベントハンドラを定義しているため、変更はMainコンポーネントに通知されます。

componentDidMount: function() {
  RadarStore.addStoreChangeListener(this._radarStoreChange);
},
_radarStoreChange: function() {
  this.setState({
    selectedOssId: RadarStore.getSelectedOss()
  });
},

Mainコンポーネントは通知された値をsetStateしてstateを更新します。するとselectedOssIdを使用している子コンポーネントが再描画されます。

一見まどろっこしいですが、データフローが1方向なのでアプリケーションがシンプルに保つことができます。規模が大きくなればなるほどこのアーキテクチャの有効性が際立ちそうです。

逆に小さいアプリケーションではそんな重厚なアーキテクチャはソースコードの行数を増やすだけであり、嬉しさを実感できないと思います。