ReactNative で RefluxJS を使ってTODOリストを作ってみた

やろうとしたこと

ReactNativeでちょっとしたアプリを作ってみたいと思った時に、ファイルや処理の分割をある程度決めたい。

やりたくないこと

ReactNativeのサンプルに含まれる Movies アプリを見てみると、処理するメソッドを props で下層の Componentに渡して処理をさせている。
階層が深くなると、親から子、子から孫 みたいに多段で渡さなければならず、さらに自身に関係ない処理を、受け渡し中間のComponent が持たなければならなくなる。

SearchScreen.js

var SearchScreen = React.createClass({
  // 省略..

  onSearchChange: function(event: Object) {
    // 省略..
  },

  render: function() {
    return (
      <View style={styles.container}>
        <SearchBar
          onSearchChange={this.onSearchChange} //←これ
          isLoading={this.state.isLoading}
          onFocus={() => this.refs.listview.getScrollResponder().scrollTo(0, 0)}
        />
        <View style={styles.separator} />
        {content}
      </View>
    );
  },

  // 省略..
});

var SearchBar = React.createClass({
  render: function() {
    return (
      <View style={styles.searchBar}>
        <TextInput
          autoCapitalize="none"
          autoCorrect={false}
          onChange={this.props.onSearchChange} //←これ
          placeholder="Search a movie..."
          onFocus={this.props.onFocus}
          style={styles.searchBarInput}
        />
        <ActivityIndicatorIOS
          animating={this.props.isLoading}
          style={styles.spinner}
        />
      </View>
    );
  }
});

Fluxを使う

ReactJSの思想とセットで、Fluxという考え方を Facebookが提唱している。

詳細はこちらの記事が詳しい。
React.jsとFlux

Fluxの実装はいくつかあって、Facebook の Flux を使ったサンプルがすでにある。

MoneyForward のエンジニアブログだ。

ReactとReactNativeでFluxなTODOを実装してみた話
https://github.com/khirayama/ReactNative-flux-todo

MoneyForwardのサービスにはいつもお世話になってます。

やったこと

Fluxの別実装の RefluxJS を使って同じような TODOアプリを作ってみた。
詳細は githubのコード見てみてください。

ディレクトリ構造

• index.ios.js
• Apps/
  • Actions/
  • Components/
  • Stores/

最後に

RefluxJS 自体調べながら作ったので、もっと効率いい書き方があったら教えて欲しいです。