はじめに
AngularでFluxを実現するために採用されるライブラリについては、NgRxがデファクトスタンダードになりつつあるのではないか.....という話を結構前に聞いたのでNgRxの学習をそろそろ始めることにする。
NgRx以外のFluxライブラリを使ったことは何度かあるので、Fluxの概念については理解しているつもり
参考サイト
バージョン情報
- angular@7.3.6
- ngrx/store@7.3.0
環境構築
Angular CLIを利用して、Angularプロジェクトを作成した後に@ngrx/storeライブラリをインストールする。
https://ngrx.io/guide/store/install
Angular CLIのバージョンが6以上の場合は、npmやyarnで@ngrx/storeライブラリをインストールする以外にも、ng addコマンドを使用して(Angular CLI経由で)@ngrx/storeライブラリをインストールすることができる。
$ ng add @ngrx/store
ng addコマンドで@ngrx/storeライブラリをインストールすると、app.module.tsの設定と、src/app/reducers/index.tsの新規作成まで自動でやってくれる。
ただ、今回は自分で設定をしたかったので、npm i @ngrx/storeでインストールを実行した。
開発
@ngrx/storeのチュートリアルアプリとして用意されているカウンターアプリを作成したので、解説する。（なお、公式サイトのものとはディレクトリ構成が異なっている）。
ディレクトリ構成
作成したカウンターアプリのディレクトリ構成を$ tree -I node_modulesコマンドで出力した（一部ファイルは省略している）。
├── src │ ├── app │ │ ├── app.component.html │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── components │ │ └── my-counter │ │ ├── action │ │ │ └── counter.actions.ts │ │ ├── reducer │ │ │ └── counter.reducer.ts │ │ └── view │ │ ├── my-counter.component.html │ │ └── my-counter.component.ts └── ・・・
コード
まず、FluxのActionを担当するファイルであるcounter.actions.tsから解説する。今仕事で使っているFluxライブラリ（自社製）とはすでに大きく違っている。
カウンターアプリのイベントである"加算"、"減算"、"リセット"をそれぞれアクションとして定義している。
今の仕事で使っているFluxライブラリだと、アクションの定義だけでなくWebAPIの呼び出しや、実際にStateの値を変更するStoraクラスの呼び出しなど(ActionをStoreに渡す)をやっていたため、結構な違いを感じてとまどう。
続いてReducerを担当しているcounter.reducer.tsについて。今仕事で使っているFluxライブラリだとStoreでStateの変更をおこなっているが、NgRxでは渡されたアクションに応じてReducerが新しいStateを返す形式になっているらしい。
export const initialState = 0;の部分でStateの初期化を行っている。
ルートモジュール設定ファイルであるapp.module.tsについて。NgRxに関連している設定として、imports[]でReducerの登録を行っている(StoreModule.forRoot({ count: counterReducer }))のと、Redux Dev Toolの設定をしている(StoreDevtoolsModule.instrument({}),)。
カウンターコンポーネントのテンプレートファイル。カウンター値の表示と、加算、減算、リセットボタンを表示を担当している。
stateの値であるcount$はObservable型なのでasyncパイプを使用して値の表示を行っている。
selectでstateの値の読み込みと、加算、減算、リセットのアクションをディスパッチして、Reducerを呼び出すメソッドをそれぞれ定義している。
ルートコンポーネントでは、カウンターコンポーネントを定義しているだけ
おわりに
少し触ってみた感想としては、NgRxはReduxよりのFluxライブラリなのでは...という印象を受けた。Redux使ったことないので習得に時間がかかりそう