NgRxを調べることにした背景
- Angularでアプリを作っている中で、NgRxの存在を知った
- 状態管理の必要性もわからないが、せっかくなら一度使ってみるぐらいはしてみたいと思った
以下、調べたことを備忘録としてまとめま〜〜〜す
※5分ルール
そもそも状態管理とは
なぜNgRxを使う必要があるのか（状態管理をする必要があるのか）
今回の開発アプリがSPAであることや、UI面での要求により、状態管理が必要となりました。
アプリ全体として、「必要なデータ（状態）」を「どのタイミングで取得するか、どうやって更新するか、いつまで保持するか」を考慮しなければならなくなりました。
アプリケーションの規模が大きくなってObservableの数が増え始めると、それぞれのObservableの配線が複雑になって、Stateがどのような状況になっているかが不明瞭になっていきます。
状態管理が複雑になってしまうと、何か不具合があったときにどのObservableによるものなのかが判断しづらく、解消に時間がかかってしまったり、不要なObservableがメモリを圧迫してパフォーマンスに影響を与えてしまうようなことが考えられます。この事態を避けるために有効な手段が@ngrxライブラリの導入です。
個人的にngrxを使う理由は主に以下の2つが大きいです。
- 開発者間での共通な設計思想
- コンポーネントテストの容易性
そもそもNgRxとは
ngrxとはAngularアプリケーションの状態管理を適切に扱うためのライブラリ集です。
一言で簡潔に説明すると、AngularとRxJSに最適化したReduxです。
ライブラリ名 概要 @ngrx/store Store, Action, Reducerなどの機能を提供するモジュール。 @ngrx/store-devtools Redux Devtools Extensionを使う為のモジュール。 @ngrx/router-store Routerのデータをngrxで扱う為のモジュール。 @ngrx/effects 副作用のある処理を扱う為のモジュール。 @ngrx/entity モデルのコレクション処理を扱い易くするモジュール。
他にも色々あるみたい
※Reduxについて
何から勉強したら良いだろう
NgRxは難しいらしい
lacolacoさん
（32:00~）effectsは好きじゃない
チームメンバーの経験のバックグラウンドなど未知数が多いのですが、それでも状態管理に関する責務は一か所に集めておいたほうがいいと思います。NgRxでなくてもよいですが、Storeだけならキャッチアップにもそれほど困難ではないかと思います。（Redux自体にはブログ記事などたくさんあるので）そして初心者ほど、NgRxがサポートしているRedux Devtoolを使ったデバッグにはかなり助けられると思います。Effectsやその他周辺のパッケージのことは置いておいて、Storeだけいれるのをおすすめしたいです。
NgRxのFeature Storeを小さく使おうというモチベーションは、 @ngrx/component-store やその他の手法のほうが圧倒的に構成要素がシンプルであり、もはや推奨できない。
standalone componentなどの流れも踏まえ、現在推奨したいのはコンポーネントローカルなサービスによる状態管理である。