はじめに
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使ったことないので習得に時間がかかりそう