ngxs を学ぶ
Biyori学ぶ理由: 今関わってるプロジェクトでデータの流れが散らばっていてどこからデータが流れてくるかわからなかったり、何かイベントが発生したときに何が起こるのかコードから追うのが難しくなってるため。設計を見直すと Flux のようなアーキテクチャが適していると感じたので、自分が今妄想している設計と合うのか調べるため。可能であれば他の Akita や NgRx なども検討したい
公式サイト https://www.ngxs.io/
BiyoriNGXS はAngular のための状態管理パターンであり、ライブラリ。Angular 専用なのかな。並行してプロジェクト作っておく。
Angular のバージョンは 13.3.7
NGXS は、Redux や NgRx と同じCQRS パターンモデルになってるが、クラスやデコレータで定型文を減らすようにしている。
NgRx は書くのが多くて挫折した記憶。
CQRS パターン。コマンドクエリ責務分離を表す。データストアの読み取りと更新の操作を分離するパターン。今までは、DBの更新とクエリに同じデータモデルが使用されていた。CRUD操作に適している形になっていたが、複雑なアプリだと読み書きの処理が複雑になってしまう。更新用のコマンドと読み取る用のクエリに分けることでモデルを分離する。
コマンドはタスクベース。クエリはDBを変更しない。
半端にしか理解してないが、あまり深く追わない。
Whyの章は軽く読み飛ばす。Angular に近いものとして作ってる感じ。かつ簡単に使える。DIとアクションライフサイクルと Promise（Observable か選択できる） が特徴。
Biyoriインストール。
npm i @ngxs/store でインストール。
NgxsModule の追加。
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, NgxsModule.forRoot([])],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
公式ページには {developmentMode: !environment.production} が書いてあるが、Ivy コンパイラなら不要らしい。Angular 13 なので不要っぽい。
ngDevMode を使って開発者モードになる？ ngDevMode の指定方法がよくわからない。
遅延読み込みする場合は forFeature を使う。ストアの初期値を渡せるけど、渡すもの無くても [] で渡しておくのが大事っぽい？ feature states の意味が分からない。