l08084のブログ

技術記事の執筆は、祈りに近い

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
  }
}

これで準備は完了です。アプリを立ち上げて、Chrome DevTools(開発者ツール)のReduxタブを選択してください。

f:id:l08084:20180310184820p:plain

👆こんな感じでStateの最新状態の閲覧、アクションの巻き戻しや再生が可能になります。

参考サイト

store/intro-tutorial.md at master · angular-redux/store · GitHub