中安拓也のブログ

プログラミングについて書くブログ

【Angular】NgRx入門

はじめに

AngularでFluxを実現するために採用されるライブラリについては、NgRxがデファクトスタンダードになりつつあるのではないか.....という話を結構前に聞いたのでNgRxの学習をそろそろ始めることにする。

NgRx以外のFluxライブラリを使ったことは何度かあるので、Fluxの概念については理解しているつもり

参考サイト

ngrx.io

バージョン情報

  • 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でインストールを実行した。

開発

f:id:l08084:20190319220128p:plain
完成したカウンターアプリ
公式サイトで@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の初期化を行っている。

カウンターアプリのReducer

ルートモジュール設定ファイルであるapp.module.tsについて。NgRxに関連している設定として、imports[]でReducerの登録を行っている(StoreModule.forRoot({ count: counterReducer }))のと、Redux Dev Toolの設定をしている(StoreDevtoolsModule.instrument({}),)。

モジュールファイル

カウンターコンポーネントのテンプレートファイル。カウンター値の表示と、加算、減算、リセットボタンを表示を担当している。

stateの値であるcount$Observable型なのでasyncパイプを使用して値の表示を行っている。

カウンターコンポーネントのテンプレートファイル

selectstateの値の読み込みと、加算、減算、リセットのアクションをディスパッチして、Reducerを呼び出すメソッドをそれぞれ定義している。

カウンターコンポーネントのコンポーネントクラス

ルートコンポーネントでは、カウンターコンポーネントを定義しているだけ

ルートコンポーネントのテンプレートファイル

おわりに

少し触ってみた感想としては、NgRxはReduxよりのFluxライブラリなのでは...という印象を受けた。Redux使ったことないので習得に時間がかかりそう