effectorを使い倒してReduxのかわりになるか検証する

Transcript

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