redux-dev-tools.md

Using DevTools

@angular-redux/store is fully compatible with the Chrome extension version of the Redux dev tools:

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

However, due to peculiarities of Angular's change detection logic, events that come from external tools don't trigger a refresh in Angular's zone.

We've taken the liberty of providing a wrapper around the extension tools that handles this for you.

Here's how to hook the extension up to your app:

import {
  NgReduxModule,
  NgRedux,
  DevToolsExtension,
} from '@angular-redux/store';

// Add the dev tools enhancer your ngRedux.configureStore called
// when you initialize your root component:
@NgModule({
  /* ... */
  imports: [, /* ... */ NgReduxModule],
})
export class AppModule {
  constructor(private ngRedux: NgRedux, private devTools: DevToolsExtension) {
    let enhancers = [];
    // ... add whatever other enhancers you want.

    // You probably only want to expose this tool in devMode.
    if (__DEVMODE__ && devTools.isEnabled()) {
      enhancers = [...enhancers, devTools.enhancer()];
    }

    this.ngRedux.configureStore(rootReducer, initialState, [], enhancers);
  }
}

ReduxDevTools.enhancer() takes the same options parameter as documented here: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md#windowdevtoolsextensionconfig