Slide 1
Slide 1 text
effectorを使い倒してReduxの代
替になりうるかを検証する
Slide 2
Slide 2 text
今回話さないこと
- Redux to effectorへのtips
- vuexとvueにおいての話
Slide 3
Slide 3 text
自己紹介
hayashi takao (れむ@9almondchocola)
software enginner
Cyberbuzz,inc.
Slide 4
Slide 4 text
突然ですが。。。
Slide 5
Slide 5 text
状態管理してますか？
Slide 6
Slide 6 text
モダンフロントエンドと状態管理
MVCモデル
↓
アプリケーションの肥大化
責務の分割が進む
↓
モダンフロントエンド
Slide 7
Slide 7 text
user
server
BfF
Frontend
Slide 8
Slide 8 text
- ngRx
- Redux
- mobx
- vuex
などなど状態管理をいい感じにするライブラリはたくさんある。
でも実際はReduxとかngRxとかが一強。
フロントでもデータの状態を管理する必要が出てきた
Slide 9
Slide 9 text
まずはreduxで状態管理を復習
Slide 10
Slide 10 text
みんな大好きRedux
状態管理ツール
stateの状態をstoreに保存してくれる。
基本的に通信は非同期は行わない。
Slide 11
Slide 11 text
effectorとは？
Slide 12
Slide 12 text
effectorとは？
> Effector is an effective multi store state manager for Javascript apps (React/React Native/Vue/Node.js), that allows you to
> manage data in complex applications without the risk of inflating the monolithic central store, with clear control flow, good
> type support and high capacity API. Effector supports both TypeScript and Flow type annotations out of the box.
effectorはマルチストアの状態管理を行うパッケージ
TypeScriptとFlowの両方に対応し型への対応もバッチリ
対応ライブラリはReact / Vue / ReactNative / Node.js
Slide 13
Slide 13 text
effectorのコアコンセプト
Slide 14
Slide 14 text
effectorのコアコンセプト
非同期の通信をデフォルトで可能にし、よりスムーズな
状態のマネジメントとデータ通信を可能にしている。
Slide 15
Slide 15 text
コンセプト
Effect
=> asyncを内部にもつ関数でasyncを
より安全に使い通信ができる
Event
=> stateを変える
Store
=> 状態を保存するオブジェクト
Slide 16
Slide 16 text
データの流れの違いをみてみる
Slide 17
Slide 17 text
出てきた概念をさらっとおさらい
Slide 18
Slide 18 text
Domain
Domainはstoreやeffectやeventをくくる名前空間の概念。
複数のDomainをつくることができ、
各Domainが配下にあるstore,effect,eventの状態をサブスクライブできる。
Domainの入子をつくることも可能。
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
Store
状態を入れてい置けるオブジェクト
ReduxのstoreとほぼおなじだけどDomainごとにStoreができるのがすこしちがうところ。
Slide 21
Slide 21 text
Event
stateの変更を伝えるもの(reduxでいうaction)
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
Effect
asyncを内包した外部との通信を行う。
asyncを内包するので非同期通信周りの面倒ごとを押し付けられる。
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
ちょっとしたサンプル
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
effectorのメリット
Slide 28
Slide 28 text
effectorのメリット
- 非同期通信をラップしてくれたメソッドのおかげで通信周りの実装が楽！
- Reduxを使う人ならそこまで学習コストが高くない。
- うまくDomainを切れればページ単位で読み込むデータの量が少なくて済む
Slide 29
Slide 29 text
effectorのつらみ
Slide 30
Slide 30 text
つらみポイント
- 非同期処理がわかってることが大前提である
- Redux知らない、Fluxってなに？って人だと学習コストが高い。
- Domainの考え方が難しい。適切に切れる気がしない。
- devtoolがない！！！
Slide 31
Slide 31 text
まとめ
- Domainという概念が大規模アプリでパワーを発揮しそう
- Effectがhooksになどに近い使い心地なのでReactと相性が良いかも
- Devtoolがあれば開発が捗るのに。。。
結論、Reduxの代わりになるにはまだはやい。