🐟

[Angular][NgRx] Redux Dev Toolsで状態を視覚的にデバッグ

2022/07/24に公開

@ngrx/store-devtools

@ngrx/store-devtoolsは、Store 用の開発ツールおよび状態の計測器を提供します。
これによって状態をデバッグすることができます。
このライブラリを使うために、Redux Dev Toolsをインストールします。

Redux Dev Toolsとは

本来は、Redux用の状態管理視覚化ツールですが、Angularでも使うことができます。
Chromeの拡張機能として利用できます。

インストール

chromeウェブストアから拡張機能を追加

下記の拡張機能を導入します。

Redux DevTools

@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することもできます。

参考

https://github.com/zalmoxisus/redux-devtools-extension/

https://v9.ngrx.io/guide/store-devtools

https://www.isoroot.jp/blog/2232/

Discussion