Angular + Reduxを学ぶ #2 - Redux DevTools chrome extension を使う

引き続きangular-redux/storeの使い方について、前回記事はこちら

Redux DevTools chrome extensionを導入してブラウザデバックの効率を上げましょう。

バージョン情報

Angular: 5.2.3
angular-redux/store: 7.1.0
TypeScript: 2.5.3
angular/cli: 1.6.5
OS: darwin x64
Node: 8.1.4

手順

Redux DevTools chrome extensionをお使いのChromeに入れてください。

f:id:l08084:20180310183553p:plain

インストールした後は、Redux DevToolsでデバックしたいAngularアプリのapp.module.tsを編集します。

// <- addとコメントされている行を追加してください。

src/app/app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { NgRedux, NgReduxModule, DevToolsExtension } from '@angular-redux/store';
import { rootReducer } from '../state/reducer';
import { INITIAL_STATE, IAppState } from '../state/store';
import { FlappyBirdActions } from '../state/action';

import 'rxjs/Rx';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgReduxModule,
  ],
  providers: [
    FlappyBirdActions,
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(
    ngRedux: NgRedux<IAppState>,
    devTools: DevToolsExtension) { // <- add
      const storeEnhancers = devTools.isEnabled() ? // <- add
      [ devTools.enhancer() ] : // <-add
      []; // <-add
      ngRedux.configureStore(
        rootReducer,
        INITIAL_STATE,
        [], // <- add
        storeEnhancers); // <- add
  }
}