React Native - Reflux

Refluxjs

reflux/refluxjsはFluxの実装の１つです。2015年12月時点での最有力FluxアーキテクチャはReduxですが、RefluxもStarが4000以上あるレポジトリで、Facebook Fluxとの違いは下記のようになります。

1. dispacherはない
2. actionがListenableでstoreからListenできる
3. storeにswitch文を必要としない
4. Action creatorを必要としない

このようにfacebook/fluxを簡略化した形で書けるのが利点になります。Constantも書く必要がないのでファイルを行ったり来たりしなくて良いのでコードを書く上で非常に助かります。(Facebook fluxを書いてみると分かりますが、これが意外と面倒でタイポする確率も上がり、生産的ではないです)

それでは見てみましょう。

Installation

$ npm install reflux —save

Directory Structure

ディレクトリは下記のようになります。dispatcher, constantがなくスッキリします。

app/
├── app.js
├── actions
│   └── UserActions.js
├── components
│   ├── FacebookLoginView.js
│   └── TabBarView.js
└── stores
    └── UserStore.js

Action

Actionは非常にシンプルでconstantと同じような感覚で書きます。

import Reflux from 'reflux';

let userActions = Reflux.createActions([
    "currentStatus",
]);

export default userActions;

Store

Storeも非常にシンプルでswitch文を必要としません。ポイントとしてActionをListenしているとこです。アクションが実行された時にStoreにあるメソッド, Actionで指定した名前にonを付け先頭の文字を大文字にしたもの(action:currentStatus, store: onCurrentStatus)が実行されます。

下記のコードの補足ですが、React NativeはBabelでtransformしているのでカジュアルにasyncが使えます。これは非常に強力で同期的にしかもシンプルに非同期処理を書けます！

import { AsyncStorage } from 'react-native';
import Reflux from 'reflux';
import userActions from '../actions/UserActions';

let USER = "USER";
let userStore = Reflux.createStore({

  listenables: userActions,

  async onCurrentStatus() {
    try {
      let value = await AsyncStorage.getItem(USER);
      this.trigger(value);
    } catch(error){
      concole.log("Error: Faild to AsyncStorage.getItem(USER)");
    }
  }
});

export default userStore;

Component

コンポーネント側も非常に楽です。Mount処理でStoreをsubscribe/unsubscribeしてます。
そして、Storeでtrigger()が呼ばれた時にコンポーネントの変更処理がonCurrentStatus()で行われます。

import React, { Navigator, View } from 'react-native';
import FacebookLoginView from './components/FacebookLoginView';
import TabBarView from './components/TabBarView';
import userActions from './actions/UserActions';
import userStore from './stores/UserStore';


let app = React.createClass({

  getInitialState(){
    return { current_route: null };
  },

  componentDidMount(){
    this.unsubscribe = userStore.listen(this.onCurrentStatus);
    userActions.currentStatus();
  },

  componentWillUnmount(){
    this.unsubscribe();
  },

  onCurrentStatus(userInfo){
    this.state.current_route = userInfo ?  "user-info" : "authentiate";
  },
  ....
});

export default app;

Summary

今回紹介したRefluxを使うことでコード量を少なくFluxアーキテクチャを実装できます。Fluxアーキテクチャの採用時に検討してみるのも良いと思います。

明日はいよいよFluxアーキテクチャの本命Reduxを紹介します。