🐟
[Angular][NgRx] Redux Dev Toolsで状態を視覚的にデバッグ
@ngrx/store-devtools
@ngrx/store-devtoolsは、Store 用の開発ツールおよび状態の計測器を提供します。
これによって状態をデバッグすることができます。
このライブラリを使うために、Redux Dev Toolsをインストールします。
Redux Dev Toolsとは
本来は、Redux用の状態管理視覚化ツールですが、Angularでも使うことができます。
Chromeの拡張機能として利用できます。
インストール
chromeウェブストアから拡張機能を追加
下記の拡張機能を導入します。
@ngrx/store-devtoolsをインストール
npm i @ngrx/store-devtools
AppModuleにインポート
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
@NgModule({
imports: [
StoreDevtoolsModule.instrument({
}),
],
})
export class AppModule {}
使い方
chrome上でRedux Dev Toolsのアイコンをクリックして呼び出します。
現在の状態(State)をリアルタイムで監視することができます。
また、あるActinoがdispatchされたときに、どのように状態が変化するか確認できます。
画像ではcountStateのcountNumプロパティの値だけしかStoreにありませんが、他にもStoreに登録すればすべてのStateを確認できます。
また、この画面から手動でReducerにdispatchすることもできます。
参考
Discussion