Ngrx/storeでのReduxDevToolsの使用

提供:Dev Guides
移動先:案内検索

Redux DevTools 拡張機能は、アプリケーションのRedux状態ツリーでアクションを視覚化して実行するための非常に人気のあるツールです。 ありがたいことに、 ngrx / store-devtools のおかげで、状態管理に ngrx /storeを使用するAngular2+プロジェクトでも使用できます。

まず、ReduxDevTools拡張機能自体をインストールします。 Chromeを使用している場合、最も簡単なのはChromeウェブストアです。 Firefox版の場合はこちら。 拡張機能がインストールされていると、Reduxを利用したアプリで作業しているときに、ブラウザーのDevToolsに新しいタブが表示されます。

次に、 Yarn またはnpmを使用して、 @ ngrx /store-devtoolsをインストールします。

$ yarn add @ngrx/store-devtools

# or:
$ npm install @ngrx/store-devtools --save

最後に、アプリモジュールで、 StoreDevtoolsModule をインポートし、NgModuleのインポートに追加します。

app.module.ts

// ...

import { StoreModule } from '@ngrx/store';
import { todoReducer } from './reducers/todo.reducer';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';

maxAge 構成はオプションであり、DevToolsに保持されるアクションの量を制限するのに役立ちます。

✨そしてそれだけです! これで、ngrx/storeプロジェクトでReduxDevToolsの使用を開始する準備が整いました。

アクションをスキップしたり、アクションと状態を視覚化したり、現在の状態ツリーをインポート/エクスポートしたりできます。

拡張機能から直接アクションをディスパッチすることもできます。