SPAの状態管理

社内LT会での資料

Transcript

1. SPAの状態管理について lunch LT
2. 前提知識: component指向 SPAでは、componentとrouterを組み合わせて アプリケーションを構築する。
3. ルーティング pathが/detail/:post_idのとき、 DetailComponentを表示する
4. /detail/:post_id 画像の部分は imageViewComponent 詳細の部分は detailInfoComponent 両方を囲っているのが detailComponent
5. componentの中でcomponentが呼ばれて 入れ子構造になっている 複数のcomponentを組み合わせてページを 構成する
6. コンポーネント指向での課題 = 状態管理 状態とは フロントエンドアプリケーションが持つデータのこと。 例) - APIで取得するデータ - アプリの状態 - サイドバーが開いてるかどうか - 使用されてるデバイスの種類　などなど
7. 状態管理をしないと。。 １つの値を複数のコンポーネントで使い回したいとき。 - サーバーのデータだったら、それぞれコンポーネントでajaxする？ 例) ユーザー情報はあらゆるコンポーネントで使う。 - アプリケーション内だけのデータだったら。。。 整合性が取れなくなる可能性が。。。 状態は１箇所で管理しよう！
8. Reduxを使う Reduxとは Fluxという概念を拡張した状態管理のライブラリ。 三大原則と処理の流れを覚える。 ngrxとは Angularに特化したRedux。 ルールとか考え方はReduxと一緒。多分。
9. Reduxの三大原則 1. Single Source of Truth アプリケーションの状態は、アプリケーション内に１つしかない、 Storeと呼ばれるオブジェクトで管理される。 状態の一元管理が可能に！
10. Chrome拡張の”Redux-DevTools”で ログを出さずに、最新の状態が 確認できる。 airbnb https://www.airbnb.jp/
11. Reduxの三大原則 2. State is read-only 状態は直接変更できない。 Storeにactionをdispatchして、 ReducerでStateを更新しなくてはならない。 ?????????????????
12. Reduxの処理の流れを把握する 引用　https://medium.com/default-to-open/understanding-a-large-scale-angular-app-with-ngrx-80f9fc5660cc
13. Actionをdispatchして、reducerでStateを更 新する。 Actionをdispatchして、reducerでStateを 更新する。 Actionをdispatchして、reducerでStateを 更新する。 復唱して覚えましょう
14. Reduxの三大原則 3. Mutations are written as pure functions 状態を変更する関数(reducer)は純粋関数でなければならない。 (すみません、よくわかりません。。。)
15. Reduxでなにが嬉しいのか 状態をstoreで一箇所で管理できる。 componentはview(見た目)の描画と、 actionのdispatchだけ行い、 ビジネスロジックはreducerに責務を分離できる。
16. store component client side Backend HTTP dispatch action Select
17. Componentの分け方 Container Component Presentational Component
18. Container Component Storeから状態をSelectする。 子供の関係にあるPresentational Componentに値を 渡す。 Actionをdispatchする。
19. Presentational Component 親の関係にあるContainer Componentから 値を受け取り、それを描画するだけ。 ロジックは極力持たない。
20. 両方を囲っているのが detailComponent => Container Component 画像の部分は imageViewComponent => Presentational Component 詳細の部分は detailInfoComponent => Presentational Component
21. componentを分ける理由 reducer / component の責務をさらに分離。 storeとやりとりするcomponent(container component)と、 viewを表示するcomponent(presentational component)の 責務を分けて、どこでなにをやってるかさらに分かり易くする。 テストを書き易くする
22. まとめ 復唱しましょう。 Actionをdispatchして、reducerでStateを更新する。 Container ComponentとPresentational Component 概念がわかるとFW問わず読めるようになると思いま す！！多分。。 状態管理とは、状態をstoreで管理する手法のこと。