@ngrx/storeを使ってみた
Angularを使ってみての感想
- 各コンポーネントで「状態」を持ててしまうので、管理が難しい。特に複数のコンポーネント間で状態を共有したい場合
- コンポーネント間でどうやって同期するのか？あるコンポーネトで更新した値を、別のコンポーネントで使いたい場合とか
- アプリケーションの「状態」を1つにまとめたい
@ngrx/store
- AngularにReduxライクな「状態管理」を導入するためのツールのひとつ
- Angularチームも積極的にコミットしており、今後デファクトスタンダードになりうるかもしれないと言われている
- データの受け渡しにRxJSを使っており、Angularとの親和性も高い
Reduxとは？
- 「状態」を管理するためのフレームワーク（Flux、Elmから影響を受けている）
- 「状態」は一つのプレーンなオブジェクトとして管理
- Action => Reducer => Storeの3構成
- 「状態」はStoreで管理し、更新の手段はActionの発火（Store#dispatchを呼ぶ）のみ
- 「状態」をどのように更新するかは、Reducerにより判別
- Reducerは副作用のない純粋な関数で書く
Reduxとは？
図で見るとこんな感じ
@ngrx/storeを使ってみて
- これまでも書いてきたReduxの書き方で一連の処理を書けるようになったので、Angularで迷うことが少なくなった
- 更新した状態をストリームとして直接コンポーネントで受け取れるのが嬉しい。（Reactの場合は、毎回バケツリレーが発生…）
- 役割がはっきりしているので、テストコードもパターン化して書ける（スピードアップ！）
まとめ
- 詳細は公式リポジトリで
- Savkinの状態管理理論を使うと良さそう
- 他に良い状態管理の方法があれば教えてください