`redux`と`flux`を比べてみたときの個人的な感想
2015/10/28 @Gotanda.js #1
自己紹介
@ushisantoasobu
ここ1年以上は主にスマートフォンアプリエンジニア
この秋から業務で久しぶりにjsをさわることに
前提
業務でReactのアプリケーションのデモ版みたいなものをつくっ
てるところ
Fluxフレームワークは話題になっていた`redux`で実装した
が、他のとどう違うのかよくわからなかった
Facebook社製の`flux`でも書いてみた
今日話すこと
個人的に感じた`redux`と`flux`の違い
設計思想とかというよりはフレームワークを利用する側の視点で
余談
`redux` => 8179
`flux` => 8841
2015/10/27時点
starの数
https://github.com/voronianski/flux-comparison
余談
余談
学習コスト
`redux`のほうが高い
`Provider`
`reducer`
`connect`
=> FluxアーキテクチャとAPIが合致しづらい
( 注 : `Provider`と`connect`は正しくはreact-redux )
学習コスト
`redux`のほうが高い
`Provider`
`reducer`
`connect`
=> FluxアーキテクチャとAPIが合致しづらい
( 注 : `Provider`と`connect`は正しくはreact-redux )
stateをハンドリングする役割
(以前はstoresという名称だった)
学習コスト
`redux`のほうが高い
=> ルートまわりの初期設定
学習コスト
学習コスト
コードの量
`flux`のほうが冗長になる
`flux`使ったときのStore、ここらへんいちいち書かなくちゃいけないの?
コードの量
`flux`使ったときのComponent、ここらへんいちいち書かなくちゃいけないの?
`flux`のほうが冗長になる
`store`
`redux` => single state tree の設計
`flux` => そのような制限はない(やろうと思えばできるん
だろうけどそういった設計になっていない、はず)
一番重要なところ
`store`
`flux-comparison`のデモ
`store`
flux
state
state
`store`
state
redux
`store`
flux
`store`
flux
それぞれのcomponentが
stateを管理している
`store`
redux
`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
`store`
single state tree って巨大になっていったときにどうなるの?
redux
reducerは分割して管理することが可能
`middleware`
時間ないので省略・・・
テスト
`action`はただのオブジェクト
`reducer`はpure function
componentは基本propsをもったもの
テストのドキュメントがしっかり整備されている(非同期ま
わりの処理も含む)
`redux`のほうがテストしやすい
ご静聴ありがとうございました (^ω^) セフセフ!

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