`redux`と`flux`を比べてみたときの個人的な感想

`redux`と`ﬂux`を比べてみたときの個人的な感想
2015/10/28 @Gotanda.js #1

自己紹介
@ushisantoasobu
ここ１年以上は主にスマートフォンアプリエンジニア
この秋から業務で久しぶりにjsをさわることに

前提
業務でReactのアプリケーションのデモ版みたいなものをつくっ
てるところ
Fluxフレームワークは話題になっていた`redux`で実装した
が、他のとどう違うのかよくわからなかった
Facebook社製の`ﬂux`でも書いてみた

今日話すこと
個人的に感じた`redux`と`ﬂux`の違い
設計思想とかというよりはフレームワークを利用する側の視点で

余談
`redux` => 8179
`ﬂux` => 8841
2015/10/27時点
starの数

https://github.com/voronianski/ﬂux-comparison
余談

学習コスト
`redux`のほうが高い
`Provider`
`reducer`
`connect`
=> FluxアーキテクチャとAPIが合致しづらい
（注 : `Provider`と`connect`は正しくはreact-redux ）

学習コスト
`Provider`
`reducer`
`connect`
=> FluxアーキテクチャとAPIが合致しづらい
（注 : `Provider`と`connect`は正しくはreact-redux ）
stateをハンドリングする役割
(以前はstoresという名称だった)

学習コスト
=> ルートまわりの初期設定

コードの量
`ﬂux`のほうが冗長になる
`ﬂux`使ったときのStore、ここらへんいちいち書かなくちゃいけないの？

コードの量
`ﬂux`使ったときのComponent、ここらへんいちいち書かなくちゃいけないの？
`ﬂux`のほうが冗長になる

`store`
`redux` => single state tree の設計
`ﬂux` => そのような制限はない（やろうと思えばできるん
だろうけどそういった設計になっていない、はず）
一番重要なところ

`store`
`ﬂux-comparison`のデモ

`store`
ﬂux
それぞれのcomponentが
stateを管理している

`store`
redux
createStoreで生成されたstore内に
アプリケーション全体のstateが保持されている

`store`
redux
`redux-router`を使って
ルーティングもstateで管理する

`store`
`redux` = single state tree
=> それぞれのコンポーネントは、
I/Fとしてのpropsのみを書いておけばいいので
キレイに保てる
redux

`store`
`redux` = single state tree
=> stateの管理がシンプルになる
redux

`store`
single state tree って巨大になっていったときにどうなるの？
redux

`store`
single state tree って巨大になっていったときにどうなるの？
redux
reducerは分割して管理することが可能

`middleware`
時間ないので省略・・・

テスト
`action`はただのオブジェクト
`reducer`はpure function
componentは基本propsをもったもの
テストのドキュメントがしっかり整備されている（非同期ま
わりの処理も含む）
`redux`のほうがテストしやすい

ご静聴ありがとうございました (＾ω＾) ｾﾌｾﾌ!

Recommended