Edited at

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

More than 3 years have passed since last update.


やろうとしたこと

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


やりたくないこと

ReactNativeのサンプルに含まれる Movies アプリを見てみると、処理するメソッドを props で下層の Componentに渡して処理をさせている。

階層が深くなると、親から子、子から孫 みたいに多段で渡さなければならず、さらに自身に関係ない処理を、受け渡し中間のComponent が持たなければならなくなる。

https://github.com/facebook/react-native/blob/master/Examples/Movies/SearchScreen.js


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のコード見てみてください。

https://github.com/marucc/ReactNative-refluxjs-todo


ディレクトリ構造


  • index.ios.js

  • Apps/


    • Actions/

    • Components/

    • Stores/




最後に

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