「Flux でアプリケーションを作る」ってのも良くわからない表現だけど、 facebook/flux とか redux みたいなのを使ってアプリケーションを作るってことにする。
この文章を書く目的としては、なんとなく書くって感じなんだけど、なんか良い知見が入ったら嬉しいなというのも少しある。
作ったのは以下の４つ。
- TwitterAPI と連携して指定された条件に一致する Tweet を表示する感じのやつ（Electron に乗ってる
- ↑これと同じようなアプリの iOS 版みたいなのを ReSwift を使って作った
- サーバーが持ってる REST な API のリソースを表示したり作ったり
- ↑これより小規模な同じようなやつ
1 は reactjs とか flux とかを把握するために作って、その後 redux/react-redux 把握するために作り直した。 2 は、1 を redux で作り直す前に redux の雰囲気を把握するために作った。 3 と 4 は会社で。 時系列的には 1-1 -> 3 -> 2 -> 1-2 -> 4 という感じ。
- Flux についての感想
- redux かそれ以外か
- Single source of truth
- flowtype
- form
- エラーの表示とか
Flux についての感想
良し悪しについてはよく分からんという感想。
データが単方向に流れるのは良いんだけど、json いじいじするのが結構だるい感じがあるけどこれは Flux 関係ない気がする。 どっかで言われてるのを見たけど、ある程度の規模になったらちゃんとしたほうが良いと思う。
redux かそれ以外か
Flux アーキテクチャとか、 facebook/flux とか redux とかは学習コスト対して変わらないのでどれでも良いと思うんだけど、redux 選ぶ場合は react-redux 使う感じになり、react-redux の学習コストが高いと感じた。
開発にかける時間とかキャッチアップにかける時間とか十分に取れないなら facebook/flux とかみたいな薄い実装を使ったほうがいざとなったら雑に済ませられるので良いなーという感想。 まあ react-redux 使っても雑に済ませられる。
Single source of truth
アプリケーション全体の状態を1つの Store で表現するみたいなやつ。
やれるならいいけど、徹底するのは結構たいへんだなーっていう印象だった。 フォームに入力された値とか、ページごとの一時的なエラーとかとか。
そこらへん大変〜ってやつはなんか使い捨ての Store 作るとコスパいい気がした。
flowtype
良し悪しについては人によるという感想。
僕は、全幅の信頼は置けないけど、無いよりマシっていう感じ。
少なくとも、Store の State と、reducer らへんには型チェックあったほうが考えること減っていいなって思う。
form
Single source of truth でも書いたけど、ここらへんのも Store に置こうとすると大変。
redux-form みたいにそこら辺をやってくれるやつ使うなら良い気がするけど、自前でやるには Action とかもいっぱい増えるしたいへん〜〜〜〜〜〜〜って感じ。
たいへん〜〜〜〜〜〜〜って感じだったから、form の状態は Container Component の state に持たせた。
エラーの表示とか
これも form と同じで、form に入力された値を API に投げたらエラー返ってきました〜みたいなのも Store に置こうとすると大変。
API のエラーとかは Action 作って dispatch して、それを使い捨ての Store で拾って云々するとコスパいい気がした。
おしまい
なんかちゃんと色々とちゃんと出来る人がやるなら色々とちゃんと出来るんだろうけど、僕のアレだと難しいところは雑に済ますみたいな感じになってるから、色々とちゃんと出来る人の知見が欲しい。
